javascript - 主干 subview 事件未触发

Question

我有点困惑为什么我的事件没有在 subview 上触发。我通常设置 $el 属性，但在本例中，我多次重复使用 subview ，因此我设置 className 属性，但它仍然没有触发。

这是我的代码:

subview (简化):

var LogbookEntryView = Backbone.View.extend({

    className: 'log-entry',
    collection: Logbook,
    template: _.template($('#logbook-entry-view').html()),

    events: {
        "click .edit-log": "editLog",
        "click .popup": "modalHandler"
    },

    render: function(model) {
        return this.template(model);
    },

    editLog: function(event) {
        var target = $(event.currentTarget);
        var id = $(target).data('id');
        var url = target.attr("href");
        var modal = $(target).data('modal');
        this.loadModal(modal, url);
        return false;
    }
})

父 View 方法:

displaySkillsByCat: function() {
    var entryView = new LogbookEntryView();
    _.each(_.keys(app.data), function(cat) {
        $("#logbook-tabs ." + cat).removeClass('disabled');
        $("#" + cat).append(app.template);
        _.each(app.data[cat], function(item) {
            $("#" + cat + " .logbook-list").append(entryView.render(item.attributes));
        });
    })

    return this;
},
    groupSkillsByCategory: function(){
  var cats = _.uniq( this.collection.pluck('cat_group') );
  _.each(cats,  function(cat, index){
    app.data['cat' + cat] = Logbook.where({'cat_group': cat});
  });
},

Answer 1

问题在于您说您正在重用 View ，但实际上您根本没有使用它。

您只是通过返回字符串的 render 函数传递数据，没有任何事件或与 Backbone 相关的任何内容。

所以第一步是修复 subview 类。

• View 上的collection 属性不适合以这种方式使用，因此请将其删除。
• View 应使用模板填充其 el 或 $el (jQuery 等效项)。
• render 应返回 this 作为标准。

var LogbookEntryView = Backbone.View.extend({
    className: 'log-entry',
    template: _.template($('#logbook-entry-view').html()),

    events: {
        "click .edit-log": "editLog",
        "click .popup": "modalHandler"
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    editLog: function(event) {
        var $target = $(event.currentTarget);
        var id = event.currentTarget.id;
        var url = $target.attr("href");
        var modal = $target.data('modal');
        this.loadModal(modal, url);
        return false;
    },
    modalHandler: function() {},
    loadModal: function() {}
});

然后，在父 View 中，您可以稍微简化一下。

• 使用_.each直接，您不需要_.keys。如果它是 Backbone 集合，您可以使用 app.data.each(...)。
• 避免使用 core jQuery function循环中。相反，cache the object放在变量中，然后在循环中使用它。
• 不要附加 subview 的字符串，而是创建一个新 View 并附加其 el DOMElement。

displaySkillsByCat: function() {
    var entryView = new LogbookEntryView();
    _.each(app.data, function(entries, cat) {
        $("#logbook-tabs ." + cat).removeClass('disabled');
        $("#" + cat).append(app.template);

        // select this element once instead of each iteration
        var $list = $("#" + cat + " .logbook-list");
        _.each(entries, function(item) {

            // here, use `.el` to get the sub-view's element
            $list.append(new LogbookEntryView({ model: item }).render().el);
        });
    })

    return this;
},

<小时/>

上面是针对您的情况的简单修复，但如果您不跟踪 subview 并且它们正在监听 Backbone 模型，则可能会出现内存泄漏。

这里有更多efficient way to render a list with Backbone .