Question

我尝试开始使用backbone.js，但是当我不使用'body'作为View的el时，我发现事件不起作用。这是代码。您可以将其保存为html文件并运行它。

<html>
    <body>
        <button id='openEssay'>test</button>
        <div id='div' style='width:100px;height:100px;'></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script><script>
    (function($){
        var AppView = Backbone.View.extend({

            el:'body',//success
    //fail  el:'#div',
    //fail    tagName: 'li',
    //fail    id:'div',
            initialize:function(){
                _.bindAll(this, 'openEssay');
            },
            events:{
                'click button#openEssay':'openEssay'
            },
            openEssay:function(){
                alert('a');
            }
       });
       var app = new AppView();
    })(jQuery);

    </script>
    </body>
    </html>

Answer 1

Backbone使用on（或旧版Backbones中的delegate）的委派形式将事件处理程序绑定到视图的this.el，有关详细信息，请参阅Backbone.View#delegateEvents。所以如果你想要这些事件：

events: {
    'click button#openEssay':'openEssay'
}

要执行任何操作，然后this.$el.find('button#openEssay')需要匹配某些内容（其中this当然是视图对象）。只有四次尝试中的一次：

el: 'body'
el:'#div'
tagName: 'li'
id: 'div'

会将<button id="openEssay">置于this.el内，因此只有（1）会在您按下按钮时调用openEssay。如果您将按钮放在#div内，那么（2）也会有效。

Answer 2

上面的答案对我非常有帮助，特别是在涉及模块化时，在我的情况下，我正在尝试构建一个可在任何视图中使用的View组件。但是事件的一部分总是什么也没做，为了解决这个问题，我只是在我的组件视图中添加el：'body'，太容易了

var RoleView = BaseView.extend({
		el: 'body',
		template : doT.template(RoleTemplate),
		model : new SessionModel(),
		events: {
			"click #open-RoleModal" : "_OpenRoleModal",
            "click #normal-Role": "_makeRole"
        },
		initialize:function(options){
			BaseView.prototype.initialize.call(this,options);
		},
		_OpenRoleModal: function(){
          //it works
		},
        _makeRole : function() {
          //it works
        },
        close: function(){
            this.$el.empty().off();
        }

	});

单击'Backbone.js View'中的Event不起作用

2 个答案: