backbone 之事件(events)

标签: backbone 事件 events | 发表时间:2013-04-16 20:07 | 作者:刘璋
出处:http://www.cnblogs.com/

  最近用 backbone 做了一个项目,加深了对前端mvc理解。同时也很多的收获。纠正了我对阅读源码的认识。一定要应用的熟练后,了解其思想后,再去阅读源码!千万不要本末倒置。想写写自己对backbone的感悟!接下来第一步就是backbone的event。


  backbone的event 是其核心。是model和view的纽带。了解event 是必要的。


 举个例子:



var User = function(name) {   
this.name = name;
}
User.records = [];

User.bind = function(ev, callback) {
var calls = this._callbacks || (this._callbacks = {});
(this._callbacks[ev] || (this._callbacks[ev] = [])).push(callback);
}

User.trigger = function(ev) {
var list, calls, i, l;
if (!(calls =this._callbacks)) return this;
if (!(list = this._callbacks[ev])) return this;
$.each(list, function(){this.apply(this())})
}

User.bind('change', function(){
alert('dddd');
});
User.create = function(name){
this.records.push(new this(name));
this.trigger('change');
}

User.create('liuzhang');


 当我们user调用create 就会触发change事件。其实backbone events也一样的思路,比如model 改变会触发change事件。collections 添加会触发add事件。


只要继承backbone 的Events 对象,对象就拥有了on,off。trigger等能力!比如文档上



var object = {};   

_.extend(object, Backbone.Events);

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

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


 上述的obejct 就可以添加了一些事件和回调,非常方便的。你可以翻翻backbone的源码看到



_.extend(Model.prototype, Events, {});   
_.extend(Collection.prototype, Events, {})
_.extend(View.prototype, Events, {});


model,view ,collection 都继承了events


backbone内置事件写的很优雅。实现很强大的功能!ok就写到此吧


 


 


  

本文链接

相关 [backbone 事件 events] 推荐:

backbone 之事件(events)

- - 博客园_首页
  最近用 backbone 做了一个项目,加深了对前端mvc理解. 一定要应用的熟练后,了解其思想后,再去阅读源码. 想写写自己对backbone的感悟. 接下来第一步就是backbone的event.   backbone的event 是其核心.  当我们user调用create 就会触发change事件.

天安门六四事件-最珍贵的视频TianAnmen 6.4 events - the most valuable video

- 共匪吃屎 - MrMolihua01在 YouTube 上的活动
什么叫平反,不需要平反,我们不需要某个流氓集团来道歉的,这就是我们做了的事而已. 我对 YouTube 视频进行了评论: 一定有平反的那么的一天的.

CSS3 pointer-events介绍

- Pstrey - 前端观察
其实早知道这个属性,但是一直没有去研究过. 今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下. 嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作.

Server-Sent Events 教程

- - 阮一峰的网络日志
服务器向浏览器推送信息,除了 WebSocket,还有一种方法:Server-Sent Events(以下简称 SSE). 严格地说, HTTP 协议无法做到服务器主动推送信息. 但是,有一种变通方法,就是服务器向客户端声明,接下来要发送的是流信息(streaming). 也就是说,发送的不是一次性的数据包,而是一个数据流,会连续不断地发送过来.

Google+Events使用体验

- - 爱谷地
Google在最新的的 Google I/O上发布了Google+ Events功能,此项目针对活动的计划组织、实时参与、活动总结几个阶段,提供了方便的图、文、视频互动功能,同时与Google Calencar以及Youtube紧密结合,意图打造一个线上活动组织平台. 同时结合Google+方便的圈子功能及隐私控制,用户可以很好的设计活动的参与模式.

通过helloworld来认识下backbone - Ruthless

- - 博客园_Ruthless
Backbone主要涉及3部分:model,collection和view. 而这个框架的优势在于:数据与视图分离,通过操作model来自动更新view. 根据我的个人经验,直接写个简单的例子是最最直观的,那么从hello world开始吧. 程序目标:创建人员,将人员添加入队伍,删除人员,清空队列.

DNSPod国内版全新亮相:前端使用Backbone技术

- - cnBeta.COM
国内最大第三方DNS解析服务商DNSPod国内新版于2012年元旦正式上线公测. 前端大胆使用Backbone.js框架,旨在为用户提供优质客户体验. DNSPod此次改版前端使用了Backbone.js,Seajs以及Mustache等先进技术. 其中Backbone的使用最为大胆,它是结合jQuery来构建复杂的 Web 前端交互应用.

Google决定采用微软的Pointer Events规格

- - Solidot
Google与微软两大竞争对手的浏览器团队交上了朋友,他们一同聚在酒吧里把酒言欢. 喝完酒后, Chrome的工程师Rick Byers在邮件列表上高兴的宣布Blink渲染引擎将采用微软提出的Pointer Events API. Pointer Events是一套触控输入处理规格,是苹果Touch Events的竞争对手,支持Pointer Events的浏览器包括了IE和Firefox.

测试touch事件

- - Kejun's Blog
进入触屏时代意味一切要对触屏友好. 今天仅仅测试了ios6,其它版本包括android还不清楚差别有多大. 看了PPK的touch兼容表(http://www.quirksmode.org/mobile/tableTouch.html),深感刚准备告别ie6,又迎来了一个新的混乱时代,苦逼的前端工程师们永远摆脱不了兼容的魔咒.

Jquery手动触发事件

- - 博客园_首页
    废话不多说,直接贴代码:.     如果想触发一个id为input的文本框的blur事件,则可以这样写:.     相类似,如果想调用input的click事件,则可以这样写:.