node package manager


Fu Manchu # backbone.fumanchu

Let your handlebars grow with live template bindings for Backbone & Marionette.

Fumanchu provides a set of Handlebars Helpers and Marionette overrides that simplify otherwise tedious tasks.

Heads Up!

This project is currently pre-alpha and not yet suitable for production use.


Declarative Encapsulation of Views

  • Encapsulate your sub-views as components, and lay them out directly in HTML templates, without needing to wire anything up on the JS side!
describe("'view' helper", function(){
        var BeanView = Backbone.Marionette.ItemView.extend({
            template: 'beans'
        var View = Backbone.Marionette.ItemView.extend({
            template: '<div>bottle and {{view "beanView"}}<div/>',
            beanView: BeanView
        view = new View();
        view = undefined;
        model = undefined;
        template = undefined;
    it('should render nested view', function(){
        expect(view.$el).to.have.text('bottle and beans');

Declarative Model Binding

  • No need to use extra HTML attributes.
  • Allows binding to multiple models on the same view (useful when there is a different view model & persistant model.)
describe("'bind' helper", function(){
        testTemplateWithModel('<div>hello, {{bind ""}}</div>', {name: 'Andy'});
    it("should render initial value properly", function(){
        expect(view.$el).to.have.text('hello, Andy');
    it("should update the value once the model has changed", function(){
        model.set('name', 'Bob');
        expect(view.$el).to.have.text('hello, Bob');

Live Conditional Bindings

  • Condition responds to changes after initial rendering
describe("'bound-if' helper", function(){
        testTemplateWithModel('<div>We should {{#bound-if "model.isWeekend"}}party {{bind "model.pun"}}{{else}}work{{/bound-if}}!</div>', {
            isWeekend: true,
            pun: 'hard'
    it("should render initial condition with nested helpers properly", function(){
        expect(view.$el).to.have.text('We should party hard!');
    it("should rerender when condition changes", function(){
        model.set('isWeekend', false);
        expect(view.$el).to.have.text('We should work!');

Bind Complex Conditions to HTML Attrs

it("should render and update properly in basic case", function(){
    testTemplateWithModel('<span {{bind-attr class="model.isValid?green:red"}}>message</span>', {
        isValid: true
    model.set('isValid', false);

And More...

For a description of current features, see current specs here



Change Log


Released 11 January 2014

  • Add bound-unless, bind-attr, bind-model


Released 9 January 2014

  • Initial release