Backbone.js "on change" event not firing correctly

Question

I'm trying to attach a simple event to an object so when a property is changed the event fires. I'm using backbone.js to try and achieve this. Below is my code.

var person = {
    name: "bob"
};

_.extend(person, Backbone.Events);

person.on("change:name", function () {
    alert("Triggered");
});

person.name = "fred";

If I use person.trigger("change:name"); the event is triggered, so I'm not sure why its not workign when I simply use person.name = "fred"; Any help is appreciated! Thanks

Answer 1

It won't work that way.

You can use a plain javascript object and trigger events on it :

var person = {
    name: "bob"
};

_.extend(person, Backbone.Events);

person.on("change:name", function () {
    alert("Triggered");
});

person.name = "fred";
person.trigger("change:name");

Or you can use a Backbone model that does most of this for you:

var Person = Backbone.Model.extend({
    initialize: function(){
      this.on("change:name", function () {
        alert("Triggered");
      });
    }
});

var person = new Person({ name: "bob" });
person.set({ name: "john" });