骨干点击事件未在模板视图中触发

Question

我正在开发一个基于动态模板的Backbone应用程序.我有一个标题视图,侧面板视图和页脚视图,在调用任何其他视图时动态初始化.问题是我在每个模板视图上都有未触发的事件.例如,我有一个按钮,用于更改标题视图中的语言,但其事件未触发.

我的标题查看:

define([ "jquery", "backbone", "text!../../pages/header.html" ], function($,
        Backbone, headerTpl) {

    var header = Backbone.View.extend({
        events : {
            "click #enBtn":"swichToEnglish",
             "click #frBtn":"swichToFrench"
        },
        initialize : function(options) {
             _.bindAll(this, "swichToFrench","swichToEnglish");

            this.render(options.parent);
            //$("#enBtn").css("pointer-events","none");

        },
        render : function(parent) {
            this.template = _.template(headerTpl);
            $(parent).append(this.template);
            return this;
        },
        swichToFrench:function(){
            console.log("switch to frensh");
            if(i18n.currentLocal == 'en'){
                i18n.currentLocal='fr';
                $("#frBtn").css("pointer-events","auto");
                this.render(options.parent);
        }
        },
        swichToEnglish:function(){
            console.log("switch to English");
            if(i18n.currentLocal == 'fr'){
                i18n.currentLocal='en';
                $("#enBtn").css("pointer-events","auto");
                $("#frBtn").css("pointer-events","none");
                this.render(options.parent);
        }   
        }
    });

    return header;
});

在路由器中调用标头视图:

self._header = new Header({parent: $(".main_container")});

任何想法如何解决这个问题.我需要知道如何解雇这些事件谢谢.

Answer 1

事件处理程序未触发的原因是因为事件处理程序被委托给views元素,但是您将模板附加到其他元素.由于目标元素位于此模板中,而该模板未附加到视图中el,因此事件将永远不会进入委托给它的处理程序.

除此之外,由于@mu太短指出,当你这样做时$(parent).append(this.template);, this.template是模板功能.您实际应该使用数据调用它来获取模板.并且你不应该使用全局选择器$(''),this.$el.find('')而是使用它作为最佳实践.

此外,options仅在initialize方法内部可用,并且在undefined外部.

不是将父级传递给视图,然后将其自身附加到父级,而是在视图外部执行此操作并使视图独立.

还要template在视图中声明属性,而不是在创建后将其添加为最佳实践.

并且不需要手动将事件处理程序的上下文绑定到视图,默认情况下,事件处理程序的上下文将是视图.

您的视图应如下所示:

define([ "jquery", "backbone", "text!../../pages/header.html" ], function($,
    Backbone, headerTpl) {

  var header = Backbone.View.extend({
    initialize : function(options) {
        this.render();
    },
    template: _.template(headerTpl),
    events : {
        "click #enBtn":"swichToEnglish",
        "click #frBtn":"swichToFrench"
    },
    render : function() {
        this.$el.append(this.template(/* pass the data here*/));
     //--------^----- this is required for the events to work
        return this;
    },
    swichToFrench:function(){
        if(i18n.currentLocal == 'en'){
            i18n.currentLocal='fr';
            this.$el.find("#frBtn").css("pointer-events","auto");
            this.render();
        }
    },
    swichToEnglish:function(){
        if(i18n.currentLocal == 'fr'){
          i18n.currentLocal='en';
          this.$el.find("#enBtn").css("pointer-events","auto");
          this.$el.find("#frBtn").css("pointer-events","none");
          this.render();
      }   
    }
  });

  return header;
});

您可以创建如下:

self._header = new Header();
$(".main_container").append(self._header.el);

看起来你只想要添加视图内容'.main_container',而不需要其他元素.在这种情况下,您可以使您的视图el指向它而不是通过传递它来创建一个新元素,el如下所示:

self._header = new Header({
 el: '.main_container' // this.el will refer to `.main_container` in view
});

那你就没必要了 $(".main_container").append(self._header.el);

如果由于某种原因必须将父级作为选项传递给视图,那么你应该将它缓存在视图中,initialize以便你可以在其他地方引用它.

this.parent = options.parent

边注:

如您所见,我已经更改了您声明视图属性的顺序 - initialize在顶部,然后是模板,事件和渲染.

我们初始化视图,创建模板函数,声明要委托的事件,然后渲染视图.

定义属性的顺序在内部无关紧要,但当另一个开发人员查看您的代码时,它更容易消化.但这是一个意见问题.