6

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.

Smith
  • 2,904
  • 3
  • 19
  • 25

2 Answers2

5

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

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

Todd H. Gardner
  • 630
  • 4
  • 18
0

I don't know of any templating engines that do this, but the KnockBack project combines Backbone and KnockOut, which does have 2-way binding.

Nate
  • 16,748
  • 5
  • 45
  • 59
  • I'll look into that. So how do you keep your Save and Update methods clean if you have to traverse the DOM so much? – Smith Jun 06 '13 at 13:24
  • You don't have to traverse the DOM in Knockout - 2-way binding means your Model gets updated automatically when things change. The answers in this question show an example - http://stackoverflow.com/questions/12305655/the-simplest-example-of-knockback-js-working-with-a-restful-webservice-such-as-s – Nate Jun 06 '13 at 15:05
  • 1
    Knockout is way to heavy if all you need is 2-way. – Todd H. Gardner Jun 06 '13 at 17:27