//Model

var Person = Backbone.Model.extend({

  //Default Attributes

  defaults: {

    'name': 'Joe',

    'age': 29,

    'gender': 'male',

    'country': 'UK'

  }

});

​

//Instantiate the Person Model

var person = new Person({

});

​

​

//Create People Collection to hold multiple Person Models

var PeopleCollection = Backbone.Collection.extend({

  model: Person

});

​

​

//Add multiple Person Models into People Collection, check out the [] as this is content in JSON style

var peopleCollection = new PeopleCollection([

  {

    'name': 'James',

    'age': 34,

    'gender': 'male',

    'country': 'USA'

  },

  {

    'name': 'Jason',

    'age': 31,

    'gender': 'male',

    'country': 'Australia'

  }

]);

​

​

​

//View

var PeopleView = Backbone.View.extend({

//   tagName: '',

  //Get the template markup

  template: $('#person-template').html(),

  initialize: function() {    

    this.$el.personCtn = $('#person-ctn');

//     console.log('His name is ' + this.model.get('name') );

    console.log(this.model);

    this.render();

  },

  render: function() {

    //Compile this.template === #person-template

    var template = Handlebars.compile(this.template);

    //Actually add to page

    var view = this;

​

    // render each model with the template  

    this.collection.each(function(model) {

      console.log(view.);

      view.$el.append(template(model.toJSON()));

    });

    return this;

  }

});

​

//Instantiate the Person View passing in the People Collection

var peopleView = new PeopleView({

  'collection': peopleCollection

});