javascript - Backbone setElement 删除事件

Question

我可能在这里遗漏了一些微不足道的东西，但看起来 setElement 没有重新绑定(bind)事件，尽管文档和代码都说应该这样做。

我已经尝试用尽可能少的代码重现问题，但它仍然有很多，所以我将它发布在 Gist 上:

https://gist.github.com/gooli/baecc277d864e28eb2c7

当我单击其中一个复选框时，“selected”会按应有的方式打印在控制台上。但是当我再次点击它时，它没有，输入不再绑定(bind)到事件。

我这样做是因为我真的想让模板包含 <tr>元素，而不仅仅是内部 <td>元素。

当我删除 <tr> 时一切正常元素，使用 tagName: 'tr'在查看和使用常用this.$el.html(...)渲染公式。

我错过了什么？

Answer 1

根据 jakee 的回答，我想出了一个更好的解决方案，它不需要在 render 中重新实现模板逻辑。

window.DayView = Backbone.View.extend({
    template: Handlebars.compile($('#day-template').html()),
    events: {
        'click .select input': 'select'
    },
    initialize: function () {
        this.model.bind('change', this.render, this);
        this.setElement(this.template(this.model.toJSON()));
    },
    render: function() {
        console.log('render');
        this.$el.html($(this.template(this.model.toJSON())).html());
        return this;
    },
    select: function (event) {
        console.log('selected');
        this.model.set({selected:$(event.target).is(':checked')});
    }
});

initialize 方法使用整个模板来创建元素。 render 方法仅使用模板的内部 html 来呈现新值。

这看起来很干净，允许我在模板中定义所有 View 的 HTML，而不依赖于 tagName。我是一个快乐的露营者。