title: Backbone change event is not firing
body: <p>I am learning Backbone and struck at one place. I wanted to load model on page load. So I have below code.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/underscore-min.js"&gt;&lt;/script&gt;
      &lt;script src="js/backbone-min.js"&gt;&lt;/script&gt;
      &lt;script src="js/json2.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;&lt;/h1&gt;
      &lt;div id="poview"&gt;&lt;/div&gt;
      &lt;script id="poTemplate" type="text/template"&gt;
          &lt;td&gt;&lt;%= Ponumber %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= Posuppliername %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= Postatusname %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= Podate %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= DispOrderTotal %&gt;&lt;/td&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          (function($) {
              var PO = Backbone.Model.extend()
  
              var POList = Backbone.Collection.extend({
                  url: 'po.json',
                  model: PO,
                  parse: function(response) {
                      console.log(response.PurchaseOrder)
                      return response.PurchaseOrder
                  }
              })
  
              var POView = Backbone.View.extend({
                  tagName: 'tr',
                  template: $('#poTemplate').html(),
                  initialize: function() {
                      _.bindAll(this, 'render')
                      this.model.bind('change', this.render)
                  },
                  events: {
                      'click': 'click'
                  },
                  render: function() {
                      console.log('po render')
                      var tmpl = _.template(this.template)
                      $(this.el).html(tmpl(this.model.toJSON()))
                      return this;
                  },
                  click: function() {
                      console.log('clicked....')
                  }
              })
  
              var POListView = Backbone.View.extend({
                  el: $('#poview'),
                  initialize: function() {
                      _.bindAll(this, 'render', 'appendPO')
                      this.collection = new POList()
                      this.collection.bind('change', this.render, this)
                      this.collection.bind('add', this.render, this)
                      this.collection.fetch({add:true})
                  },
                  render: function() {
                      var self = this;
                      console.log(this.collection.models)
                      this.collection.each(function(po) {
                          self.appendPO(po)
                      }, this)
                  },
                  appendPO: function(po) {
                      var poView = new POView({
                          model: po
                      });
                      console.log(po)
                      $(this.el).append(poView.render().el)               
                  }
              });
  
              var poListView = new POListView()
  
          })(jQuery)
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And below is json response from server</p>
  
  <pre><code>{
      "@totalCount": "1134",
      "PurchaseOrder": [
          {
              "ID": "689600",
              "Ponumber": "K037412201",
              "Poname": "",
              "Podate": "2011-12-26T10:03:24.000+05:30",
              "Posuppliername": "XYZ UPS Supplier",
              "Postatusname": "Approved - Supplier Received",
              "DispOrderTotal": "$1.99"
          },
          {
              "ID": "689601",
              "Ponumber": "K037412202",
              "Poname": "",
              "Podate": "2011-12-26T10:03:24.000+05:30",
              "Posuppliername": "ABC UPS Supplier",
              "Postatusname": "Approved - Supplier Received",
              "DispOrderTotal": "$1.99"
          }
      ]
  }
  </code></pre>
  
  <p>But when the page is loaded render method on POListView is not fired. What is issue in this code?</p>
  
  <p><strong>Edit</strong></p>
  
  <pre><code>jQuery(function($){
    ...
  });
  </code></pre>
  
  <p>If I use above convention also, that does not work.</p>
  
  <p><strong>Working example</strong>
  Refer answer from @JayC </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/underscore.js"&gt;&lt;/script&gt;
      &lt;script src="js/backbone.js"&gt;&lt;/script&gt;
      &lt;script src="js/json2.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;&lt;/h1&gt;
      &lt;div id="poview"&gt;&lt;/div&gt;
      &lt;script id="poTemplate" type="text/template"&gt;
          &lt;td&gt;&lt;%= Ponumber %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= Posuppliername %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= Postatusname %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= Podate %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= DispOrderTotal %&gt;&lt;/td&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          jQuery(function($) {
              var PO = Backbone.Model.extend({
                  idAttribute: 'ID'
              })
  
              var POList = Backbone.Collection.extend({
                  url: 'po.json',
                  model: PO,
                  parse: function(response) {
                      console.log('parse')
                      return response.PurchaseOrder
                  }
              })
  
              var POView = Backbone.View.extend({
                  tagName: 'tr',
                  template: $('#poTemplate').html(),
                  initialize: function() {
                      _.bindAll(this, 'render', 'click')
                  },
                  events: {
                      'click': 'click'
                  },
                  render: function() {
                      var tmpl = _.template(this.template)
                      $(this.el).html(tmpl(this.model.toJSON()))
                      return this;
                  },
                  click: function() {
                      console.log('clicked.... ' + this.model.id)
                  }
              })
  
              var POListView = Backbone.View.extend({
                  el: $('#poview'),
                  initialize: function() {
                      _.bindAll(this, 'render', 'appendPO')
                      this.collection = new POList()
                      this.collection.bind('reset', this.render, this)
                      this.collection.fetch()
                  },
                  render: function() {
                      var self = this;
                      console.log(this.collection.models)
                      this.collection.each(function(po) {
                          self.appendPO(po)
                      }, this)
                  },
                  appendPO: function(po) {
                      var poView = new POView({
                          model: po
                      });
                      $(this.el).append(poView.render().el)               
                  }
              });
  
              var poListView = new POListView()
  
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>