mvc - files.meetup.com filefreejs mvc a rendszer céljai - kis méret - függetlenség - moduláris...

FreeJS MVCJavaScript keretrendszer

FreeJS MVC

A rendszer céljai

- Kis méret

FreeJS MVC

A rendszer céljai

- Kis méret

- Keretrendszer függetlenség

FreeJS MVC

A rendszer céljai

- Kis méret

- Keretrendszer függetlenség

- Moduláris rendszer

FreeJS MVC

A rendszer céljai

- Kis méret

- függetlenség

- Moduláris rendszer

- Könnyen megérthetõ struktúra

Keretrendszer

FreeJS MVC

A rendszer céljai

- Kis méret

- függetlenség

- Moduláris rendszer

- Könnyen megérthetõ struktúra

- Ismerõs környezet

Keretrendszer

FreeJS MVC

Az MVC

FreeJS MVC

Inspiráció

- CodeIgniter

- Smarty

- Mootools, jQuery

FreeJS MVC

A keretrendszer

- Lazy loading

FreeJS MVC

A keretrendszer

- Lazy loading

- AJAX támogatás

FreeJS MVC

A keretrendszer

- Lazy loading

- AJAX támogatás

- Event támogatás

FreeJS MVC

A keretrendszer

- Lazy loading

- AJAX támogatás

- Event támogatás

- URL hash támogatás

FreeJS MVC

A keretrendszer

- Lazy loading

- AJAX támogatás

- Event támogatás

- URL hash támogatás

- Klasszikus MVC

FreeJS MVC

A használat

app = new FreeJS();

“app” redelkezni fog az alábbi objektumokkal:

- app.model

- app.view

- app.controller

FreeJS MVC

A használat

app = new FreeJS();

“app” redelkezni fog az alábbi objektumokkal:

- app.model

- app.view

- app.controller} .load(’controller.hello.js’)

FreeJS MVC

A használat

app = new FreeJS();

“app” redelkezni fog az alábbi objektumokkal:

- app.model

- app.view

- app.controller

} .ajax(’dynamic_content.php’)

FreeJS MVC

A használat

app = new FreeJS();

“app” redelkezni fog az alábbi objektumokkal:

- app.model

- app.view

- app.controller } .register(’object’,{...})

FreeJS MVC

A model

app.model metódusai:

- set(’model_neve’, ‘érték’)

- get(’model_neve’)

- ajax(’url’, ‘query_str’, { options }) // auto JSON dekódolás

FreeJS MVC

A Nézet

app.view metódusai:

- app.view.register(’tpl_name’, ‘template’)

- app.view.assign(’tpl_name’, ‘model_name’)

- app.view.render(’tpl_name’, ‘target_id’)

- app.view.ajax(’url’, ‘query_str’, callback_fn )

// array key+value

// target_id opcionális

// nincs eval()

FreeJS MVC

A Controller

app.controller metódusai:

- app.view.register(’tpl_name’,{ ... }’)

- app.view.call(’ctrl_name’, ‘method’)

- app.view.toElement(’element’, ‘event_name’, ctrl_method’)

FreeJS MVC

A Controller és a hash

# / : :

app.controller.register( ' ', {

initialize: function() {

app.model.set( 'sent_emails', { 'emails': [] } );

},

function( ){

app.view.assign( ‘email_list_display’, [’value’,$(’name’).value] );

}

});

http://webapp.com/index.html comm

comm

sent_emails

sent_emails:

hello world

param1, param2

app.view.assign( ‘email_list_display’, ‘sent_emails’ );

app.view.render( ‘email_list_display’, ‘email_viewport’ );

FreeJS MVC

A Controller és a hash

# / : :

app.controller.register( ' ', {

initialize: function() {

app.model.set( 'sent_emails', { 'emails': [] } );

},

function( ){

app.view.assign( ‘email_list_display’, ‘sent_emails’ );

app.view.render( ‘email_list_display’, ‘email_viewport’ );

}

});

http://webapp.com/index.html comm

comm

sent_emails

sent_emails:

hello world

param1, param2

this.message = ‘Hello world’;

app.view.assign( ‘email_list_display’, [’value’, ] );

app.view.toElement( $(’show_sent_emails’), ‘click’, ‘ / ’);

this.message

comm sent_emails

FreeJS MVC

Elérhetõség

http://tibor.szasz.hu

@kowww

Demo: http://tibor.szasz.hu/labs/freejs-mvc/demo

FreeJS MVC

Köszönöm a figyelmet

Hamarosan forkolható a GitHubon