使用 Backbone 的 View 时,可以象传统 jQuery 那样定义事件,$("selector").click(function(){...})
。幸运的是 Backbone 让我们在 View 中定义事件变得更为简单和集中,只要设置 View 的 events
属性,配置 事件,元素以及相应的处理方法,基本模式如下:
events: {
“click button”: “event_handler”,
“focus #name”: “event_handler”
},
event_handler: function( event ){
alert(event.target.id);
}格式是
"事件 选择器": "事件处理函数名"
假设 html 内容为:
- <div id="container">
- </div>
而 template 内容为:
- <script type='text/template' id='tpl'>
- <div class="myclass">
- 事例内容
- </div>
- </script>
- window.appView = Backbone.View.extend({
- template: _.template(jQuery("tpl").html()),
- events: {
- "click div": "onClick",
- },
- onClick: function (e) {
- alert(this);
- },
- initialize: function (pid) {
- this.parent = jQuery(jQuery("#"+pid)[0]);
- this.render();
- },
- render: function () {
- this.parent.html(""); // 先清空窗口内的其他内容
- this.parent.html(this.template());
- },
- });
所以正确的写法应该是:
- window.appView = Backbone.View.extend({
- template: _.template(jQuery("tpl").html()),
- events: {
- "click div": "onClick",
- },
- onClick: function (e) {
- alert(this);
- },
- initialize: function (pid) {
- this.parent = jQuery(jQuery("#"+pid)[0]);
- this.render();
- },
- render: function () {
- this.$el.html(this.template()); // 将tpl中的内容写入到 this.el 元素中
- this.parent.html(""); // 先清空窗口内的其他内容
- this.parent.html(this.el);
- this.delegateEvents(); // 由于重绘了整个视图(this.$el.html(...);),所以保险的办法是重新绑定所有事件
- return this; // 这里借鉴的是 Backbone 教程里 todo.js 的做法
- },
- });
这样一来,this.el 里的内容就不再是 "<div></div>" 了,而是 '<div> <div class="myclass"> 事例内容 </div></div>' 了。这时再时行事件响应函数的分配时,就能在 this.el 里面找到一个div,并为之分配一个 onClick 函数了。
同时,由于在 render() 的开头,用 this.$el.html(this.template()); 重新绘制了整个视图,所以保险办法是调用 this.delegateEvents(); 重新绑定所有事件。
这里有一个问题,就是为什么不把 this.el 设置为 jQuery("#container"); 呢?其实一开始我也是这样做的,这样做的话 click 事件就可以很方便地响应到了,因为render() 之后 this.el 里肯定不只是 "<div></div>" 的。但是这样做的话,在视图 remove() 的时候就会出问题了。remove() 的效果是把 this.el 整个节点删除,也就是说,“<div id="container"></div>” 也会被删除!那么后来如果还有元素想在这个容器中写入的话,就会出错了!因为网页中已经没有了 id="container" 这个容器了!大家可以多看看 Backbone 官网上的 Todo 例子,个人觉得相当经典!网址如下: http://backbonejs.org/examples/todos/index.html