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); //將參數(shù)數(shù)組轉(zhuǎn)化成真正的數(shù)組
 args.unshift(this.models);  //將Collection真正用來維護集合的數(shù)組，作為第一個個參數(shù)
 return _[method].apply(_, args); //使用apply調(diào)用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事件觸發(fā)的render調(diào)用時，之前實例化的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放在這里，避免第一次加載數(shù)據(jù)后的自動排序，觸發(fā)的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數(shù)組以跟蹤創(chuàng)建的view
 this.views =[]
 },
 addOne: function(task){
 var view = new TaskView({ model : task });
 this.$el.append(view.render().$el);
 //將新創(chuàng)建的view保存起來
 this.views.push(view);
 },
 render: function(){
 var _this = this;

 //遍歷views數(shù)組，并對每個view調(diào)用Backbone的remove
 _.each(this.views,function(view){
  view.remove().off();
 })

 //清空views數(shù)組，此時舊的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(){ //初始化構(gòu)造函數(shù)
  this.on('change',function(){ //綁定change事件，當數(shù)據(jù)改變時執(zhí)行此回調(diào)函數(shù)
  alert(123);
  });
 }
 });

 var model = new Mod;
 model.set('name' ,'backbone');//修改默認的name屬性值為backbone，此時數(shù)據(jù)被改變，彈出123
</script>

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

<script type="text/javascript">
 //自定義事件
 var Mod = backbone.Model.extend({
 defaults : {
  name : 'trigkit4',
  age : 21;
 },
 initialization : function(){ //初始化構(gòu)造函數(shù)
  this.on('change:age',function(){ //綁定change事件，當數(shù)據(jù)改變時執(zhí)行此回調(diào)函數(shù)
  alert(123);
  });
 }
 });

 var model = new Mod;
 model.set('name' ,'backbone');//修改默認的name屬性值為backbone，此時數(shù)據(jù)被改變，彈出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多了個參數(shù)
  },
  show : function(model){
  $('body').append('<div>' + model.get('name') + '</div>');
  }
 });

 var m = new Mod;
 var v = new V({model:m});//model指定創(chuàng)建的模型對象m,即前面的路由，哈希值的對應(yīng)
 m.set('name','hello');//對模型進行就改時，觸發(fā)事件，頁面也就更新了 
 });
</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多了個參數(shù)
   },
   show : function(model){
    $('body').append('<div>' + model.get('name') + '</div>');
   }
  });

  var m = new Mod;
  var v = new V({model:m});//model指定創(chuàng)建的模型對象m,即前面的路由，哈希值的對應(yīng)
  m.set('name','hello');//對模型進行就改時，觸發(fā)事件，頁面也就更新了  
 });
</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值找到對應(yīng)的回調(diào)函數(shù)
</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>