Using Backbone.js and jquery.datalink.js

Question

Is it possible to use Backbone.js and jquery.datalink.js together to link a Backbone model to a set of fields, and if so how?

For example, given:

<div id="person">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
</id>

and

var m = Backbone.Model.extend({});

It seems to make sense (but not work) that one could:

$("#person").link(m);

By "not work" I mean that when I change the model, the link doesn't update the input fields. When I change the input fields, the model isn't updated.

I've been tinkering with this on jsFiddle, but to no avail. Indeed, it seems the data link plugin doesn't actually work as documented (unless I've made an error).

If datalink isn't suitable for this, I'd appreciate suggestions for alternatives.

I'd be grateful for thoughts and feedback.

Never used datalink but backbone model is accessed by .get('field') so it wouldn't work out of the box. You would need to implement a converter on the link to make use of the get/set methods of the model. — Julien, Feb 28 '11 at 01:13
@Julien: Thanks for the tip -- I've been tinkering and noticed that, too. :) I'm thinking that if I'm going through the trouble writing the converter I'm wondering what the benefit would be of `datalink` ... — Brian M. Hunt, Feb 28 '11 at 01:55
I usually do check for change events like so {"change input, textarea, select": "update_model"} in backbone and assign the values to my model after that. I use the render to repopulate the fields afterward by listening to change events on the model like so this.model.bind("change", this.oh_oh_change) — Julien, Feb 28 '11 at 14:25

score 1 · Accepted Answer · answered May 02 '11 at 20:58

I have not used the Datalink plugin but this may help...

This sort of violates the principle of encapsulation but you could use the model.attributes object inside the Backbone model.

So maybe something like this:

$("#person").link(m.attributes);

Also, when you instantiate a Backbone.Model it look like this:

var m = new Backbone.Model();

When you call Backbone.Model.extend you actually create a new constructor (like a new class), not an object instance.

score 1 · Answer 2 · answered Jun 18 '11 at 08:29

The solution provided by @Sam is expected to work, but it has associated issues that you must be aware of. Backbone models are observable, ie. you can bind functions to change events in models. These events are triggered by the wrapper getter and setter functions provided by Backbone. If you bypass these getters and setters, by using model.attributes directly then the events will not be triggered when the data changes. So, this is not a problem if your data-linking association is uni-directional ie. when the javascript object gets modified then the view changes, but if you want to implemenet bi-directional data-linking you will run into problems, because when the view gets manipulated by the user, the model attributes do get modified but the corresponding setters are not used and hence rest of application code is not notified of the change. This can lead to hard to debug problems. If data binding is your chief concern, do look into KnockoutJS which has state-of-the-art data linking capabilities.

Using Backbone.js and jquery.datalink.js

2 Answers2