backbone.fumanchu

Live template bindings for Backbone/Marionette.

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.

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

  • 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(){
 
    beforeEach(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.render().$el.appendTo(testContainer);
    });
 
    afterEach(function(){
        view = ;
        model = ;
        template = ;
        testContainer.empty();
    });
 
    it('should render nested view', function(){
        expect(view.$el).to.have.text('bottle and beans');
    });
 
});
  • 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(){
 
    beforeEach(function(){
        testTemplateWithModel('<div>hello, {{bind "model.name"}}</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');
    });
});
  • Condition responds to changes after initial rendering
describe("'bound-if' helper", function(){
    beforeEach(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!');
    });
 
});
it("should render and update properly in basic case", function(){
    testTemplateWithModel('<span {{bind-attr class="model.isValid?green:red"}}>message</span>', {
        isValid: true
    });
 
    expect(view.$("span").attr('class')).to.equal('green');
 
    model.set('isValid', false);
 
    expect(view.$("span").attr('class')).to.equal('red');
});

For a description of current features, see current specs here

MIT

Released 11 January 2014

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

Released 9 January 2014

  • Initial release