3

我尝试开始使用backbone.js，但我发现当我不使用“body”作为视图的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>
4

2 回答 2

15

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

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

做任何事情都this.$el.find('button#openEssay')需要匹配一些东西（this当然，视图对象在哪里）。您的四次尝试中只有一次：

  1. el: 'body'
  2. el:'#div'
  3. tagName: 'li'
  4. id: 'div'

将放在<button id="openEssay">里面，所以当你按下按钮时this.el只有(1)会调用。openEssay如果你把你的按钮放在里面，#div那么（2）也可以。

于 2012-08-20T08:41:54.110 回答
0

上面的答案对我非常有帮助，尤其是在模块化方面，就我而言，我正在尝试构建一种 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();
        }

	});

于 2015-12-29T15:17:23.490 回答