A mini Marionette for Backbone.js


License: MIT

Language: JavaScript

Minionette Build Status Code Climate Coverage Status

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.


Because Backbone doesn't get much better than this:

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>First</li><li class="last">last</li>'),
    appendModelView: function(view) {

var Main = Minionette.View.extend({
    template: _.template('<p>Some content from another view</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>' +
        '<div id="content"></div>'
    regions: {
        nav: new Nav({collection: navCollection}),
        content: '#content'

var app = (new App()).render();

app.content.attach(new Main()).render();


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.Regions 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 is nothing more than Minionette.View with two minor tweaks to easily support rendering models.


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


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 template subview insertion using the special {{view 'regionName'}} syntax.


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 template 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.

Project Statistics

Sourcerank 4
Repository Size 1.36 MB
Stars 25
Forks 5
Watchers 7
Open issues 5
Dependencies 24
Contributors 2
Tags 28
Last updated
Last pushed

Top Contributors See all

Justin Ridgewell James

Packages Referencing this Repo

A mini Marionette for Backbone.js
Latest release v1.7.0 - Published - 25 stars

Recent Tags See all

v1.7.0 March 12, 2014
v1.6.1 March 11, 2014
v1.6.0 March 08, 2014
v1.5.2 November 27, 2013
v1.5.1 October 30, 2013
v1.5.0 October 30, 2013
v1.4.0 October 25, 2013
v1.3.2 October 22, 2013
v1.3.1 October 22, 2013
v1.3.0 October 21, 2013
v1.2.2 October 20, 2013
v1.2.1 October 19, 2013
v1.2.0 October 19, 2013
v1.1.4 October 16, 2013
v1.1.3 October 16, 2013

Interesting Forks See all

A mini Marionette for Backbone.js
JavaScript - Published - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2016-05-27 14:40:47 UTC

Login to resync this repository