backbone.fumanchu

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