Backbone.js 的 View 中定义事件

Jan 6, 2014 --- · 1 min read · javascript Backbone ·

Share on:

使用 Backbone 的 View 时，可以象传统 jQuery 那样定义事件，$("selector").click(function(){...})。幸运的是 Backbone 让我们在 View 中定义事件变得更为简单和集中，只要设置 View 的 events 属性，配置事件，元素以及相应的处理方法，基本模式如下：

1events: {
2    "click button": "event_handler",
3    "focus #name": "event_handler"
4},
5
6event_handler: function( event ) {
7    alert(event.target.id);
8}

格式是 "事件选择器": "事件处理函数名", 奇怪为什么这里不是使用事件处理函数名的引用，也就是不能写成下面两种方式：

1"click button": event_handler
2或者 "click button": function(event){ ..... }

也就不能更好的进行语法检查和一气呵成的写上面的事件代码。

还是上完整的演示代码

 1<!DOCTYPE html>
 2<html>
 3     <head>
 4         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 5         <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
 6         <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
 7     </head>
 8     <body>
 9        <div id="container"></div>
10        <br/>Button not from Backbone: <button id="btn3">Button2</button>
11        <script type="text/template" id="my_template">
12            <input id="name">
13            <button id="btn1">Button1</button>
14        </script>
15     </body>
16 </html>
17 
18 <script>
19    var AppView = Backbone.View.extend({
20        el: '#container',
21        initialize: function(options) {
22            this.render();
23        },
24        render: function() {
25            var template = _.template($("#my_template").html());
26            this.$el.html(template);
27        },
28        events: {
29            "click button": "event_handler",
30            "blur #name": "event_handler"
31        },
32        event_handler: function( event ){
33            alert(event.target.id);
34        }
35    });
36
37    var appView = new AppView();
38</script>

点击 http://fiddle.jshell.net/Unmi/2Dcy4/ 运行上面的代码，会发现在输入框失去焦点和点击 Button1 时都会触发事件的执行，但是点击 Button2 是不会触发 event_handler 事件处理方法的。也就是说上面绑定事件采用了如下代码：

1this.$el.find("button").click(event_handler);

"click button" 这句只会在 this.$el 范围内应用选择器查找元素来绑定事件。

参考： 1. What is a view?
2. java12 Listening to DOM events in backbone js – Learning Backbone js 永久链接 https://yanbin.blog/backbone-view-define-events/, 来自隔叶黄莺 Yanbin's Blog
[版权声明]

本文采用署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。