Backbone.js 的 View 中定义事件


使用 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);
}

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

“click button”: event_handler
或者 "click button": function(event){ ..... }

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

还是上完整的演示代码

<!DOCTYPE html>
<html>
     <head>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
         <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
         <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
     </head>
     <body>
        <div id="container"></div>
        <br/>Button not from Backbone: <button id="btn2">Button2</button>
        <script type="text/template" id="my_template">
            <input id="name">
            <button id="btn1">Button1</button>
        </script>
     </body>
 </html>
  
 <script>
    var AppView = Backbone.View.extend({
        el: '#container',
        initialize: function(options) {
            this.render();
        },
        render: function() {
            var template = _.template($("#my_template").html());
            this.$el.html(template);
        },
        events: {
            "click button": "event_handler",
            "blur #name": "event_handler"
        },
        event_handler: function( event ){
            alert(event.target.id);
        }
    });
 
    var appView = new AppView();
</script>

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

this.$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


你可能感兴趣的:(backbone.js)