var Events = Backbone.Events = { .. }

var model = _.extend({},Backbone.Events);
var view = _.extend({},Backbone.Events);
view.listenTo(model,\'custom_event\',function(){ alert(\'catch the event\') });
model.trigger(\'custom_event\');

var Events = Backbone.Events = { .. }

var Model = Backbone.Model = function(attributes, options) {
 ...
};

_.extend(Model.prototype, Events, { ... })

url: function () {
 var base =
 _.result(this, \'urlRoot\') ||
 _.result(this.collection, \'url\') ||
 urlError();
 if (this.isNew()) return base;
 return base.replace(/([^\\/])$/, \'$1/\') + encodeURIComponent(this.id);
},

// Underscore methods that we want to implement on the Collection.
// 90% of the core usefulness of Backbone Collections is actually implemented
// right here:
var methods = [\'forEach\', \'each\', \'map\', \'collect\', \'reduce\', \'foldl\',
\'inject\', \'reduceRight\', \'foldr\', \'find\', \'detect\', \'filter\', \'select\',
\'reject\', \'every\', \'all\', \'some\', \'any\', \'include\', \'contains\', \'invoke\',
\'max\', \'min\', \'toArray\', \'size\', \'first\', \'head\', \'take\', \'initial\', \'rest\',
\'tail\', \'drop\', \'last\', \'without\', \'difference\', \'indexOf\', \'shuffle\',
\'lastIndexOf\', \'isEmpty\', \'chain\', \'sample\'];
Backbone巧妙的使用下面的代码将这些方法附加到Collection中：

// Mix in each Underscore method as a proxy to `Collection#models`.
_.each(methods, function (method) {
 Collection.prototype[method] = function () {
 var args = slice.call(arguments); //将参数数组转化成真正的数组
 args.unshift(this.models);  //将Collection真正用来维护集合的数组，作为第一个个参数
 return _[method].apply(_, args); //使用apply调用underscore的方法
 };
});

//只挑选type=1的book
var Books = Backbone.Collection.extend({
 parse:function(models,options){
 return _.filter(models , function(model){
  return model.type == 1;
 })
 }
})


//为Book对象添加url属性，以便渲染
var Book = Backbone.Model.extend({
 parse: function(model,options){
 return _.extend(model,{ url : \'/books/\' + model.id });
 }
})

// List of view options to be merged as properties.
var viewOptions = [\'model\', \'collection\', \'el\', \'id\', \'attributes\', \'className\', \'tagName\', \'events\'];

var Task = Backbone.Model.extend({})

var TaskView = Backbone.View.extend({
 tagName: \'tr\',
 template: _.template(\'<td><%= id %></td><td><%= summary %></td><td><%= description %></td>\'),
 initialize: function(){
 this.listenTo(this.model,\'change\',this.render);
 },
 render: function(){
 this.$el.html( this.template( this.model.toJSON() ) );
 return this;
 }
})

var TaskCollection = Backbone.Collection.extend({
 url: \'http://api.test.clippererm.com/api/testtasks\',
 model: Task,
 comparator: \'summary\'
})

var TaskCollectionView = Backbone.View.extend({
 initialize: function(){
 this.listenTo(this.collection, \'add\',this.addOne);
 this.listenTo(this.collection, \'reset\',this.render);
 },
 addOne: function(task){
 var view = new TaskView({ model : task });
 this.$el.append(view.render().$el);
 },
 render: function(){
 var _this = this;

 //简单粗暴的将DOM清空
 //在sort事件触发的render调用时，之前实例化的TaskView对象会泄漏
 this.$el.empty();

 this.collection.each(function(model){
  _this.addOne(model);
 })

 return this;
 }

})

var tasks = null;
var tasklist = null;

$(function () {
 // body...
 $(\'#start\').click(function(){
 tasks = new TaskCollection();
 tasklist = new TaskCollectionView({
  collection : tasks,
  el: \'#tasklist\'
 })

 tasklist.render();
 tasks.fetch();
 })

 $(\'#refresh\').click(function(){
 tasks.fetch({ reset : true });
 })

 $(\'#sort\').click(function(){
 //将侦听sort放在这里，避免第一次加载数据后的自动排序，触发的sort事件，以至于混淆
 tasklist.listenToOnce(tasks,\'sort\',tasklist.render);
 tasks.sort();
 })
})

var TaskCollectionView = Backbone.View.extend({
 initialize: function(){
 this.listenTo(this.collection, \'add\',this.addOne);
 this.listenTo(this.collection, \'reset\',this.render);
 //初始化一个view数组以跟踪创建的view
 this.views =[]
 },
 addOne: function(task){
 var view = new TaskView({ model : task });
 this.$el.append(view.render().$el);
 //将新创建的view保存起来
 this.views.push(view);
 },
 render: function(){
 var _this = this;

 //遍历views数组，并对每个view调用Backbone的remove
 _.each(this.views,function(view){
  view.remove().off();
 })

 //清空views数组，此时旧的view就变成没有任何被引用的不可达对象了
 //垃圾回收器会回收它们
 this.views =[];
 this.$el.empty();

 this.collection.each(function(model){
  _this.addOne(model);
 })

 return this;
 }

})

<script type=\"text/javascript\">
 //自定义事件
 var Mod = backbone.Model.extend({
 defaults : {
  name : \'trigkit4\';
 },
 initialization : function(){ //初始化构造函数
  this.on(\'change\',function(){ //绑定change事件，当数据改变时执行此回调函数
  alert(123);
  });
 }
 });

 var model = new Mod;
 model.set(\'name\' ,\'backbone\');//修改默认的name属性值为backbone，此时数据被改变，弹出123
</script>

object.on(event, callback, [context])

<script type=\"text/javascript\">
 //自定义事件
 var Mod = backbone.Model.extend({
 defaults : {
  name : \'trigkit4\',
  age : 21;
 },
 initialization : function(){ //初始化构造函数
  this.on(\'change:age\',function(){ //绑定change事件，当数据改变时执行此回调函数
  alert(123);
  });
 }
 });

 var model = new Mod;
 model.set(\'name\' ,\'backbone\');//修改默认的name属性值为backbone，此时数据被改变，弹出123
</script>
listenTo
<script type=\"text/javascript\">
 $(function(){
 var Mod = Backbone.Model.extend({
  defaults : {
  name : \'trigkit4\'
  }
 });
 var V = Backbone.View.extend({
  initialize : function(){
  this.listenTo(this.model,\'change\',this.show);//listenTo比on多了个参数
  },
  show : function(model){
  $(\'body\').append(\'<div>\' + model.get(\'name\') + \'</div>\');
  }
 });

 var m = new Mod;
 var v = new V({model:m});//model指定创建的模型对象m,即前面的路由，哈希值的对应
 m.set(\'name\',\'hello\');//对模型进行就改时，触发事件，页面也就更新了 
 });
</script>

<script type=\"text/javascript\">
 $(function(){
  var Mod = Backbone.Model.extend({
   defaults : {
    name : \'trigkit4\'
   }
  });
  var V = Backbone.View.extend({
   initialize : function(){
    this.listenTo(this.model,\'change\',this.show);//listenTo比on多了个参数
   },
   show : function(model){
    $(\'body\').append(\'<div>\' + model.get(\'name\') + \'</div>\');
   }
  });

  var m = new Mod;
  var v = new V({model:m});//model指定创建的模型对象m,即前面的路由，哈希值的对应
  m.set(\'name\',\'hello\');//对模型进行就改时，触发事件，页面也就更新了  
 });
</script>

<script type=\"text/javascript\">
  var Workspace = Backbone.Router.extend({
    routes: {
      \"help\":         \"help\",
      \"search/:query\":      \"search\",
      \"search/:query/p:page\":\"    search\"
    },

    help : function(){
      alert(123);
    },

    search : function(query,page){
      alert(345);
    }
  });

  var w = new Workspace;

  Backbone.history.start();//backbone通过hash值找到对应的回调函数
</script>
事件委托
  <script type=\"text/javascript\">
    $(function(){
      var V = Backbone.View.extend({
        el : $(\'body\'),
        //对events进行集体操作
        events : {
          \"click input\" : \"hello\", 
          \"mouseover li\" : \"world\"
        },
        hello : function(){
          alert(1234);
        },
        world : function(){
          alert(123)
        }
      });
      var view = new V;
    });
  </script>
<body>
  <imput type = \"button\" value = \"hwx\" />
  <ul>
    <li>1234</li>
    <li>1234</li>
    <li>1234</li>
    <li>1234</li>
    <li>1234</li>
  </ul>
</body>