Do any templates support 2-way binding using backbone.js?

Question

At this point in time I have been using underscore.js templates to load my backbone.js models into the DOM when I fetch them.

When it's time for me to save changes that the user made I have been getting the values of the forms using plain jQuery calls.

Is there a templating engine out there that will 2-way bind the templates with backbone.js models?

For instance if my template has the following:

<input id="name" type="text" val="<%= Name %>" />

When the user changes the text in the input will it automatically change the text in the backbone.js model so that I can skip this step?

Save: function() {
    var name = $('#name').val();
    this.model.set({ Name: name });
    this.model.save();
}

The problem I'm having is that I have a lot of clutter in my Save methods because I have to traverse through all the items and get their id's so I can set them. It gets especially messy when I have fairly complex html templates.

Answer 1

Yes, there are two great Backbone extensions for two-way binding:

• Backbone Stickit (Recommended): http://nytimes.github.io/backbone.stickit/
• Backbone ModelBinder: https://github.com/theironcook/Backbone.ModelBinder

The best advantage of Modelbinder is that it integrates nicely with Backbone.Validations if you want to do automatic validations alongside the binding.