Backbone 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()));

I need to replace the whole element html with the template html and that's why I need to use the setElement function.

假设你有以下 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;
}

Backbone setElement 后事件未委托给新元素

Backbone events not delegated to new element after setElement

javascript

backbone.js

underscore.js