title: backbone js, Update view on model change
body: <p>Why my view is not getting updated? </p>
  
  <pre><code>    &lt;html&gt;
  
       &lt;script src="./jquery.js"&gt;&lt;/script&gt;
       &lt;script src="./underscore-min.js"&gt;&lt;/script&gt;
       &lt;script src="./backbone.js"&gt;&lt;/script&gt;
  
       &lt;style&gt;
          table,td {border:1px solid #000;}
       &lt;/style&gt;
  
       &lt;body&gt;
       &lt;/body&gt;
  
       &lt;script&gt;
  
       var rowTemplate="&lt;tr&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;td class='name'&gt;&lt;%= name %&gt;&lt;/td&gt;&lt;td class='age'&gt;&lt;%= age %&gt;&lt;/td&gt;&lt;/tr&gt;";
  
       /** View representing a table */
       var TableView = Backbone.View.extend({
  
           tagName: 'table',
  
           initialize : function() {
               _.bindAll(this,'render','renderOne');
               if(this.model) {
                this.model.on('change',this.render,this);
                console.log(this.model);
               }
           },
  
           render: function() {
               this.collection.each(this.renderOne);
               return this;
           },
  
           renderOne : function(model) {
               var row=new RowView({model:model});
               this.$el.append(row.render().$el);
               return this;
           }
       });
  
       /** View representing a row of that table */
       var RowView = Backbone.View.extend({  
           events: {
               "click .age": function() {console.log(this.model.get("name"));}
           },
  
           render: function() {
               var html=_.template(rowTemplate,this.model.toJSON());
               this.setElement( $(html) );
               return this;
           },
  
           update : function() {
  
           }
       });
  
       var data = [
           {'name': 'Oli', 'age': 25},
           {'name': 'Oli', 'age': 25},
  
           ];
  
       /** Collection of models to draw */
       var peopleCollection = new Backbone.Collection(data);
       var tableView = new TableView({collection: peopleCollection});
       $("body").append( tableView.render().$el );
  
       console.log(peopleCollection.models[0].set({'name': 'VJY', 'age': 25}));
       console.log(peopleCollection.models[0]);
  
       &lt;/script&gt;
  
       &lt;/html&gt;
  </code></pre>