jquery - Confused about Backbone.js structure - trying to bootstrap a simple app -

new backbone , i'm trying simple application , running. i'm running grunt.js uglify concat of files in following order:

  'assets/js/main.min.js': [     'collections/**/*.js',     'models/**/*.js',     'routers/**/*.js',     'views/**/*.js',     'app.js',], 

i'm literally trying render template <div> starters. i've copied lot backbone.js todo applicaiton.

my simple application files follows.

views/offerslist.js

var ph = ph || {};  (function ($) {   'use strict';    ph.offerslist = backbone.view.extend({      el: $('.offers'),      template: _.template($('#offers-list-template').html()),      initialize: function () {       this.model.bind('change', this.render, this);       this.render();     },      render: function () {       this.$el.html(this.template(this.model.tojson()));       return this;     },    }); })(jquery); 

models/offer.js

var ph = ph || {};  (function () {   'use strict';    ph.offer = backbone.model.extend({      defaults: {       name: "my offer"     }    }); })(); 

collections/offers.js

var ph = ph || {};  (function () {   'use strict';    var offers = backbone.collection.extend({     model: ph.offer   });    ph.offerscollection = new offers();  })(); 

and app.js

var ph = ph || {};  $(function () {   'use strict';    // kick things off creating `ph`   new ph.offerslist();  }); 

i've got template in .html file, inside .offers div (i'm not trying render data, template @ point:

<ul class="offers">   <script id="offers-list-template" type="text/x-mustache-template">     <h1>offers list</h1>     <p>offers go here</p>   </script> </ul> 

it seems if model hasn't been bound, or isn't instantiated. i'm getting

uncaught typeerror: cannot call method 'bind' of undefined on line this.model.bind("change", this.render, this), this.render();

i apologize wall of text, i'm new this. trying wrap head around simple solution before move on!

thanks!

the initialize method has in place

this.model.bind('change', this.render, this); 

so expecting model passed in view here

  // kick things off creating `ph`   new ph.offerslist(); 

as not passing model view ..

model set undefined , throwing error

 new ph.offerslist({model: offersmodel } ); 

but because offerslist (plural) talking about, expect pass in collection here instead..

edit

you need pass in new instance of model , not, model directly.

ph.offerslist({ model: new ph.offer() }); 

or

var phmodel = new ph.offer();  ph.offerslist({ model: phmodel  });