What patterns support two-way binding with backbone.js?

Question

At this point, I used underscore.js templates to load my backbone.js models into the DOM when I retrieve them.

When I need to save changes made by the user, I get the values ​​of the forms using simple jQuery calls.

Is there a template engine that will bind templates using two-way binding using backbone.js models?

For example, if my template has the following:

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

When the user changes the input text, does he 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 am facing is that I have a lot of clutter in my save methods, because I need to go through all the elements and get their identifier so that I can set them. This gets especially messy when I have fairly complex html templates.

Answer 1

I don't know any templates that do this, but the KnockBack project combines Backbone and KnockOut, which have 2 external bindings.

Answer 2

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

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

The best advantage of Modelbinder is that it works well with Backbone.Validations if you want to perform automatic validation along with binding.