Created by Javi A. / @johnhackworth
Plantillas renderizadas y refrescadas desde cliente. Propuestas por primera vez (hasta donde yo sé) por John Resig en http://ejohn.org/blog/javascript-micro-templating/.
Mustache, Handlebars, Hogan
Underscore, dot, ejs
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div>
<div class="entry"> <h1><%= title %></h1> <div class="body"> <% print(body.toLowercase()) %> </div> </div>
Backbone es un framework MVC muy muy ligero
(1500 lineas de código en total).
Proporciona:
Para todo lo demás, Backbone es no-opionated. Es agnóstico a que sistema de plantillas se utilize, a que se use para hacer el data binding, testing, etc.
Las únicas dependencias 'duras' de backbone son jquery/zepto y underscore (y json2 si se quiere compatibilidad con Satán (ie < 9))
Modelan un recurso. Normalmente se "suscriben" (vía .url) a un punto de entrada de una API rest y consumen y persisten los datos a través de ese entry point.
var userModel = Backbone.Model.extend({
defaults: {
name: '',
age: 0
},
initialize: function(params) {
this.friends = [] // importante hacer esto así!
},
url: 'http://example.com/user/'
})
Arrays de modelos con cierta funcionalidad propia
Enlaza los datos (modelo) con lo que ve el usuario (temmplates). Escucha eventos en ambos sitios y lanza las acciones adecuadas cuando se producen
var userProfileController = Backbone.View.extend({
events: {
"click .save": "saveUser",
"change .name": "updateName"
},
template: 'http://example.com/userProfile.html',
initialize: function() {
this.model.on('change', this.render.bind(this));
this.model.fetch();
},
saveUser: function() {
this.model.save();
},
updateName: function() {
var userName = this.$('.name').val();
this.model.set('name', userName);
},
render: function() {
var userData = this.model.toJSON();
var view = _.template(this.template, userData);
this.$el.html(view)
}
})
Escuchan los cambios en el hash de la url y ejecutan acciones en función de ellos. También pueden usarse con urls completas, usando Push State.
Backbone.history.start() pone a backbone a escuchar los cambios en la url
var routes = Backbone.Router.extend({
routes: {
"!/userProfile/:id": "showUserProfile"
// http://example.com/#!/userProfile
},
showUserProfile: function(id) {
var userModel = new userModel({id: id});
var userController = new userProfileController({
el: $('.profile'),
model: userModel
})
}
})
Backbone.history.start()
En principio, Marionette dará algunas de estas cosas resueltas, el resto están ya resueltas en sonata Retail