backbone starter

gistfile1.js

var Player = Backbone.Model.extend({
  defaults: {
    "name": "James",
    "kit": 10
  }
});

var james = new Player();
james.on('change:kit', function(model) {
  console.log("my new number is " + model.get('kit'));
});

james.set({"kit": 20});
var cr = new Player({"name":"CR", "kit":7});

var Team = Backbone.Collection.extend({
  model: Player
});

var real = new Team();
real.on('add', function(player) {
  console.log(player.get('name') + ' has joined the team');
});
real.add([james, cr]);

real.each(function (player) {
  console.log(player.get('name'));
});

var htmlStr = 
    "this is <%= name %> speaking " + 
    "<button id='oldName'>Name</button>" + 
    "<button id='renewName'>Change</button>";
    
var PlayerView = Backbone.View.extend({ 
  tagName: 'li',
  events: {
    "click #oldName": "showInfo",
    "click #renewName" : "renewName"
  },
  template:  _.template(htmlStr),
  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },
  render: function() {
    this.$el.html(this.template(this.model.attributes));
    return this;
    
  },
  showInfo: function() {
    alert("i am nice guy: "+ this.model.get('name'));
  },
  renewName: function() {
    this.model.set({"name": "Ozil"});
  }
});

real.each(function (player) {
  var playerView = new PlayerView({model: player});
  $('#player-list').append(playerView.render().el);
});