Correct way of binding multiple attribute changes to a Backbone.js model

Question

I have the following code, where I bind a change to a single attribute "attribute_1".

var Mine = Backbone.Model.extend({
  initialize: function() {
    this.bind("change:attribute_1", function() {
      console.log('changed!');
    });
  }
});

How do I bind two attributes? This doesn't work:

var Mine = Backbone.Model.extend({
  initialize: function() {
    this.bind("change:attribute_1, change:attribute_2", function() {
      console.log('changed!');
    });
  }
});

Nor does this:

var Mine = Backbone.Model.extend({
  initialize: function() {
    this.bind("change:attribute_1 change:attribute_2", function() {
      console.log('changed!');
    });
  }
});

score 81 · Answer 1 · answered Feb 29 '12 at 19:49

81

As of Backbone.js 0.9.0, the bind() function (which has been renamed to on()) supports a space-delimited list of events:

model.on("change:title change:author", ...)

// equivalent to

model.bind("change:title change:author", ...)

answered Feb 29 '12 at 19:49

Rob Hruska

118,520
32
167
192

2

Now does this call the callback once or multiple times per change? – Sukima Aug 15 '13 at 17:16
4

@Sukima It calls once per changed attribute. If title changes, fires once. If author changes, fires once. If both title and author change, first once for title and once for author. – Thaddeus Albers Sep 08 '13 at 21:43
2

How does this map to the listenTo syntax? – backdesk Apr 23 '14 at 12:30
3

@backdesk it would be the same `model.listenTo(model, "change:title change:author", ...)` – Vic Apr 29 '15 at 20:38

score 24 · Accepted Answer · edited Aug 22 '13 at 14:14

24

I don't know if such a "bulk-bind" function exists (you could open a feature request for it, it seems useful).

You can bind them separately:

var Mine = Backbone.Model.extend({
  initialize: function() {
    var listener = function() { console.log('changed'); };
    this.bind("change:attribute_1", listener);
    this.bind("change:attribute_2", listener);
  }
});

Or you can listen to all changes (and then filter in the listener):

var Mine = Backbone.Model.extend({
  initialize: function() {
    var listener = function() { console.log('changed'); };
    this.bind("change", listener);
  }
});

edited Aug 22 '13 at 14:14

chris Frisina

19,086
22
87
167

answered Nov 25 '11 at 00:59

Thilo

257,207
101
511
656

12

Also, `bind()` is chainable: `this.bind(...).bind(...)`. – Crescent Fresh Nov 25 '11 at 01:21
1

If using a common listener, how do you check which attribute changed? – Daniel Hershcovich Dec 21 '14 at 14:38

Correct way of binding multiple attribute changes to a Backbone.js model

2 Answers2