Una implementaci贸n simple de subvista de muck-up de Backbone

Backbone es una biblioteca realmente elegante, liviana y flexible, y debido a su flexibilidad, te deja un gran espacio para que funcione como un “marco”. Aqu铆 hay un ejemplo de c贸mo escribir una subvista de Backbone muck-up que puede permitirle colocar su subvista en el html en lugar de combinarlas en JavaScript.

Dependencias

Para implementar la subvista en el muck-up, necesitamos las siguientes bibliotecas para trabajar con Backbone juntas:

Bigote daliniano

Underscorejs

Requirejs

Jquery

Uso

Veamos primero c贸mo funciona. Ponga el fragmento de abajo en su html y deje el resto del trabajo a The Handlebars

{{render model id="myRenderer" class="myClass" renderer="path.of.renderer" otherAttributes}}

o

{{render renderer="path/of/renderer" otherAttributes}}

Implementar

// A subview holder of the current stage. Can be used to
// retrieve the views, or tear down when leave the stage.
var stage = [];

(function() {

Handlebars.registerHelper('render', function(context, options) {
var attributeHash = (options && options.hash) || context.hash,
tag
= attributeHash.tag || "div",
viewModel
= options ? context : null,
token
= _.uniqueId();

if (attributeHash.renderer)
// Make sure the render action is always asynchronously.
setTimeout
(function() {
render
(token, tag, viewModel, attributeHash);
}, 0);
else
throw new Error(
"Backbone sub view renderer requires a 'renderer' attribute.");

// Return the html place holder.
return new Handlebars.SafeString(
[ "<", tag," renderer-id='", token, "'></", tag,">" ].join(""));
});

function render(token, tag, model, hash) {
require([ hash.renderer ], function(SubView) {
var $placeHolder = $([ tag, "[renderer-id=", token, "]" ].join("")),
subView
= null;

if (SubView.prototype instanceof Backbone.View) {
subView
= new Renderer({
token
: token,
model
: model,
attributes
: _.omit(hash, "tag")
});

stage
.push({
token
: token,
view
: subView
});

$placeHolder
.replaceWith(renderer.$el);
} else {
throw new Error(
"The subview renderer must inherit from Backbone.View.");
}
});
}
})();