Backbone API 深入解说

Backbone.js events ON

文章版权归ilove学习网黄冠所有

下面一些重要的概念都有解释，点击就会看到详细解释...新手别想太多，跟着我走就好...

 

代码：

 

varobject = {}; 

_.extend(object,Backbone.Events);

object.on("alert",function(msg) { alert("Triggered " + msg); });  

object.trigger("alert","an event");

 

解释：

 

line1: 定义一个object

line2: object 扩展了Events

line3: 当发生alert事件的时候，调用匿名函数function(msg) { alert("Triggered " + msg); }

line4: 发出alert事件，这时匿名函数被调用，传入参数an event, 所以屏幕上弹出 Triggered an event

 

语法：

 

重点解释一下line 3的on的用法, object.on(event, callback,[context])

 

on的作用是，当1）把callback（回调函数，就是一个method）绑定到object上面，2)当发生event的时候，就调用callback这个method。比如上面的object.on("alert", function(msg) { alert("Triggered" + msg); }); 就是说1）把function(msg){ alert("Triggered " + msg); }这个method绑定到object上面，2）当alert这个事件发生的时候，就调用function(msg) { alert("Triggered " + msg); }。注意，这里function(msg) { alert("Triggered " + msg); }是个匿名函数。

 

在这个例子中我们就直接用"alert"作为event参数，但是很多时候我们可以给event加上一个命名空间，比如"poll:start", 或者 "change:selection"，这样这个event的含义更明确一点，也防止在event很多的时候不小心照成名称重复的错误。

 

另外，这个event参数其实可以是多个event，那么多个event之间用空格分开，比如 book.on("change:titlechange:author", ...); 这样，当其中任何一个event发生的时候，callback都会被调用。

 

我们注意到object.on(event, callback,[context]) 里面第三个参数是可选的，是一个context，什么是context，点击这里看详细的解释。需要注意的是，context是提供给callback用的，具体在callback里面是不是通过this来获取传入的第三个参数context,官方文档也没有明确说明，但是按照惯例，都是通过this来获取context的。（todo: 需要验证一下）（todo: javascript中this的含义点击这里）。

 

上面例子中的event的名字都是我们自己定义的，有一个特殊的事件，叫all, 给个例子：

 

proxy.on("all",function(eventName) { object.trigger(eventName); });

当我们看到all的时候，就是说任何事件发生的时候，后面这个callback都会被执行。注意是任何事件，而不是一个叫"all"的事件，深入理解一下。

最后，举个多event的例子

 

book.on({

  "change:title": titleView.update,

  "change:author": authorPane.update,

  "destroy": bookView.remove

});

当change:title 发生的时候，调用titleView.update；当change:author发生的时候，调用authorPane.update; 当destroy发生的时候，调用bootView.remove

 

文章版权归ilove学习网黄冠所有