//Model

var Person = Backbone.Model.extend({

  //Default Attributes

  defaults: {

    'name': 'Joe',

    'age': 29,

    'gender': 'male',

    'country': 'UK'

  }

});

​

​

​

//Create People Collection to hold multiple Person Models

var PeopleCollection = Backbone.Collection.extend({

  model: Person,

  addPerson: function(elements, options) {

                return this.add(elements, options);

        }

});

​

//View

var PersonView = Backbone.View.extend({

//   tagName: '',

  //Get the template markup

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

  initialize: function() {  

    this.collection = new PeopleCollection([],{ });  

    var p = { name: 'James',age: 34, gender: 'male' , country: 'USA'}; 

    var p2 = { name: 'Jason',age: 31, gender: 'male' , country: 'Australia'};

    this.elementModel = new Person(p);

    this.collection.addPerson(this.elementModel);

    this.elementModel = new Person(p2);

    this.collection.addPerson(this.elementModel);

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

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

    console.log(this.collection);

    this.render();

  },

  render: function() {

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

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

    var here = this;

    //Actually add to page

    $.each( this.collection.models , function( key, value ) {

        console.log(value);

       here.$el.personCtn.append( template( value.toJSON() ) );

    });

    return this;

  }

});

​

//Instantiate the Person View

var personView = new PersonView({

});