Question

I trying to generate forms with Backbone.js,

Here is how I am doing it now.

Each Input element on the form has a Model and a View. So as usual the model contains attributes like type value name placeholder etc .

By backbone convention I have gotten changes to Model reflecting on the UI

But I want the reverse also to happen,
that is when the value of an input element changes that has to reflect upon the model’s attribute value.

Here is where I am right now:
prototype1.js

I am thinking of writing a update method on the view which will update the model, something like this. Is there a better way to do it ?

PS :

This has not helped much stackoverflow search: backbone.js reverse model binding

Any general advice is also welcome along with the answer.

Answer 1

Have you ever heard of backbone.modelbinding?
it’s a plugin created by Derick Bailey, that was brought to live especially for that purpose,

once a model changes, it updates the view,
once the view changes it updates the model.

i’ve used it before, and it works very well for a straight forward form,
as for now i don’t see why it wouldn’t work with your form,
but you’d have to try it out and see whether your structure fits.

initializing is quite easy:

SomeView = Backbone.View.extend({
  render: function(){
    // ... render your form here
    $(this.el).html("... some html and content goes here ... ");

    // execute the model bindings
    Backbone.ModelBinding.bind(this);
  }
});

that is the basic straightforward binding,
you can go mutch further than that:

you can bind model to view that does not render (already in the page)
you can bind to multiple model properties
you can do binding through data-bind style attributes in the form if you would want that
you can bind to a model’s events

lot’s of options, so take a look at it and see if it fit’s your app.