mvc - files.meetup.com filefreejs mvc a rendszer céljai - kis méret - függetlenség - moduláris...
TRANSCRIPT
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