Backbone Model Listener

Listening to change in backbone model objects

by kapilgopinath

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div id="prev" style="float:left">

</div>
<div id="change" style="float:right">


</div>

JavaScript

var m = new Backbone.Model({
  att1: 'a',
  att2: 'b',
  att3: 'c'
});
var myView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.model, 'change', function(obj) {
      console.log(obj, this.model.matches(), obj.changed)
      var $table = $('<table/>');
      $.each(obj._previousAttributes, function(key, val) {
        $table.append('<tr><td>' + key.concat(',', val) + '</td>' + (key in obj.changed ? '<td style="background-color:coral">Modified</td></tr>' : '') + '</tr>');
      });
      var $table1 = $('<table/>');
      $.each(obj.attributes, function(key, val) {
        $table1.append('<tr><td>' + key.concat(',', val) + '</td></tr>');
      });
      $('#prev').html($table);
      $('#change').html($table1);
    });
  }

});
/*this.listenTo(m,'change', function(obj) {
    console.log(obj.changedAttributes());
    console.log(_.keys(obj.changedAttributes()));
});*/
var myView = new myView({
  model: m
});

m.set({
  att1: 'v',
  att3: 'e'
});