backbone.fumanchu

Live template bindings for Backbone/Marionette.

npm install backbone.fumanchu
3 downloads in the last week
3 downloads in the last month

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.

Features

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(){

    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 = undefined;
        model = undefined;
        template = undefined;
        testContainer.empty();
    });

    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(){

    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');
    });
});

Live Conditional Bindings

  • 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!');
    });

});

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
    });

    expect(view.$("span").attr('class')).to.equal('green');

    model.set('isValid', false);

    expect(view.$("span").attr('class')).to.equal('red');
});

And More...

For a description of current features, see current specs here

License

MIT

Change Log

0.1.0

Released 11 January 2014

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

0.0.0

Released 9 January 2014

  • Initial release
npm loves you