在 setElement 之后没有委托给新元素的主干事件

Question

我正在使用 Underscore 模板实现 Backbone 视图。使用 setElement 函数将视图 el 替换为模板 html。该函数的声明说“......将视图的委托事件从旧元素移动到新元素”但由于某种原因这不起作用。任何想法为什么这不能像 Backbone 声明中描述的那样工作？

这是一个例子（视图的相关部分）：

     initialize: function(args) {
        _.extend(this, args);
        this.listenTo(this.model, 'change', this.render);
     },

     events: {
        'click .active-area': '_test'
     },

     _test: function() {
        // After "setElement" this doesn't fire anymore.
        this.model.set('color', 'green');
     },

     render: function() {
        // After this the "click" listener no longer exists.
        this.setElement(this.template(this.model.toJSON());

        return this;
     }

Answer 1

this.template(...) 不是 DOM 中的元素。

在您的代码中，setElement 从旧元素中移除事件监听器，然后将它们委托给新元素，新元素只存在于内存中，而不是页面上。

您应该简单地更改当前元素的内容。

this.$el.html(this.template(this.model.toJSON()));

---

我需要用模板 html 替换整个元素 html，这就是为什么我需要使用 setElement 函数。

假设您有以下 HTML：

<div id="currentView"><!-- view's root (el) -->
    <button type="button" class="active-area">Click me</button>
    <span class="color"><%= color %></span>
</div>

添加一个包装 div 并将 #currentView div 移动到模板中。

<div class="wrapper"><!-- view's root (el) -->
    <div id="currentView">
        <button type="button" class="active-area">Click me</button>
        <span class="color"><%= color %></span>
    </div>
</div>

现在this.$el.html 将交换整个元素。

---

如果你真的希望视图交换它自己的根元素，你可以创建一个新元素，然后使用 jQuery 的replaceWith 将新元素放置在旧元素的位置。

render: function() {
    // create a new element from the template
    var $newEl = $(this.template(this.model.toJSON()));

    // completely replace the current element in the DOM
    this.$el.replaceWith($newEl);

    // then tell the view
    this.setElement($newEl);

    return this;
}