Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/390.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 注册事件处理程序的基本主干问题_Javascript_Jquery_Dom_Backbone.js - Fatal编程技术网

Javascript 注册事件处理程序的基本主干问题

Javascript 注册事件处理程序的基本主干问题,javascript,jquery,dom,backbone.js,Javascript,Jquery,Dom,Backbone.js,我真的不明白主干网应该如何处理在HTML插入DOM之前要在HTML上注册事件处理程序的常见场景 大多数主干视图如下所示: var PortalView = Backbone.View.extend({ events: { 'click #logout-li-id': 'onClickLogout' //1 (doesn't work) }, initialize: function (opts) {

我真的不明白主干网应该如何处理在HTML插入DOM之前要在HTML上注册事件处理程序的常见场景

大多数主干视图如下所示:

var PortalView = Backbone.View.extend({


        events: {

            'click #logout-li-id': 'onClickLogout'   //1 (doesn't work)
        },

        initialize: function (opts) {


            var self = this;

            $('#logout-li-id').on('click', function (event) { //2 (doesn't work because '#logout-li-id' is not in the DOM yet
               event.preventDefault();
               alert(event);
            });

        },

        render: function () {

            var self = this;

            var template = allTemplates['templates/portalTemplate.ejs'];

            var ret = EJS.render(template, {});

            $('#main-div-id').html(ret);

            $('#logout-li-id').on('click', function (event) { //3 works!
                event.preventDefault();
               alert(event);
            });

            return this;

        },
        onClickLogout: function(event){
           alert(event);
         }
    });

正如您在上面所看到的,我已经标记了3个类似的调用来在DOM元素上注册事件处理程序“#logout li id”-问题是,在DOM元素上注册回调的唯一成功调用是在呈现函数(调用#3)中,这是在将此主干视图的el插入DOM之后发生的。因此,在主干视图的events对象中声明密钥的标准方法不起作用!那么用主干网做这件事的正确方法是什么呢?

主干网希望视图通过
事件
散列处理的事件是视图的
el
的子元素(即视图的根DOM元素)。看起来您可能没有将此视图附加到您正在侦听的DOM元素的父级-是否
$('#main div id')
视图的
el
的子级

这里的标准方法类似于:

var PortalView = Backbone.View.extend({

    // Associate this view with the element it will manage
    el: '#main-div-id',

    events: {
        'click #logout-li-id': 'onClickLogout'
    },

    render: function () {
        var template = allTemplates['templates/portalTemplate.ejs'];
        var ret = EJS.render(template, {});
        // Render to this view's element
        this.$el.html(ret);
    }
});

更多详细信息:
events
哈希通过向视图的DOM节点添加委托事件处理程序来工作。本质上,视图DOM树中的每次单击都将调用一个处理程序,该处理程序将检查事件目标是否与给定的选择器匹配。如果是,它会将事件传递给指定的视图方法。但这仅在您单击的元素位于视图的DOM树中时有效,否则,视图的DOM将永远不会获取事件,也永远不会调用事件处理程序。

谢谢,我想知道是否可以调用渲染函数底部的类似“this.delegateEvents()”的内容?我只需要一个主干函数,在我将模板呈现给DOM之后注册事件。理论上,调用this.delegateEvents()可以实现我想要的行为,但我不确定它是否真的可以实现,因为主干添加到DOM后不需要注册,所以委派事件由视图的
el
处理,并且可以注册,而不管它是否在DOM中。如果您试图绑定到视图的
el
之外的某个对象,那么您是做错了。是的,我不认为我做的是错的。我想要附加侦听器的元素位于这个特定视图的模板中,在本例中为portalTemplate.ejs。这是正常的。我认为主干可能希望视图上有一个模板属性,而不是在呈现函数中解析模板。换句话说,注销li id在portalTemplate.ejs的html中