Minionette
A mini Marionette for Backbone.js
Minionette provides three highly optimized View classes for you to use,
Minionette.View
, Minionette.ModelView
, and
Minionette.CollectionView
. Each class is designed to ease development,
from using several performance boosting techniques during rendering to
placing subviews directly in templates and allowing the subviews to be
easily removed.
Why?
Because Backbone doesn't get much better than this: JS Bin
var NavItem = Minionette.ModelView.extend({
tagName: 'li',
template: _.template('<a href="<%= href %>"><%= text %></a>')
});
var Nav = Minionette.CollectionView.extend({
ModelView: NavItem,
tagName: 'ul',
template: _.template('<li>before</li><li class="last">last</li>'),
appendHtml: function(element) {
this.$('.last').before(element);
}
});
var Main = Minionette.View.extend({
template: _.template('<p>Some content</p>')
});
var navCollection = new Backbone.Collection([
{ text: 'home', href: '/' },
{ text: 'google', href: 'http://google.com/' }
]);
var App = Minionette.View.extend({
el: $('body'),
template: _.template(
'<nav><%= view("nav") %></nav>' +
'<%= view("contents") %>'
),
regions: {
nav: false,
contents: new Main()
}
});
var app = (new App()).render();
app.contents.render();
var nav = new Nav({collection: navCollection});
app.nav.attach(nav.render());
Minionette.View
Minionette.View
is the base View class, providing an easy way to
listen for events on an associated model or collection, an actually
useful generic rendering function, easy subviews (AKA Regions).
Minionette.Region
Minionette.Region
s help manage subviews of a Minionette.View
,
allowing you to specify directly in a template where a subview should be
attached. A view can have any number of regions, each managing their own
part of the overall view.
Minionette.ModelView
Minionette.ModelView
is nothing more than Minionette.View
with two
minor tweaks to easily support rendering models.
Minionette.CollectionView
Minionette.CollectionView
is an optimized Minionette.View
for your
Backbone collections. It quickly handles rendering using a
DocumentFragment, ensuring at most three content reflows even with
hundreds of models to render. The most important feature of
CollectionView
is the #ModelView
property, from which all models
will have a view instantiated from.
Other Templating Languages
Handlebars.js
Full support for Handlebars.js templating is trivial. Just use the following:
Handlebars.registerHelper('view', function(name) {
return new Handlebars.SafeString(this.view(name));
});
This will allow for subview insertion using the special {{view
'regionName'}}
syntax. See JS Bin
for an example.
Mustache.js
Full support for Mustache.js templating takes just a bit more effort.
You must override the internal-use _serialize()
method in your view
with the following:
var View = Minionette.extend({
//...
_serialize: function() {
var _viewHelper = this._viewHelper;
return _.extend({view: function() { return _viewHelper; }}, this.serialize());
}
//...
});
This will allow for subview insertion using the special
{{#view}}regionName{{/view}}
syntax. For ease of use, have all of
your new View classes extend from this, and they will all be compatible
with Mustache. See JS Bin for an
example.