Backbone js：如何删除视图中的额外标签？答案

【问题标题】：Backbone js: How to remove extra tag in view?Backbone js：如何删除视图中的额外标签？
【发布时间】：2011-10-05 15:37:31
【问题描述】：

我有以下模板：

<div class="row">
  <div></div>
  ....
</div>

还有以下观点：

    var TestView = Backbone.View.extend({
    tagName: "div",
    template: $("#tests_template"),
    initialize: function () {
        _.bindAll(this, 'clickbtn');
    },
    events:
    {
        "click .btn": "clickbtn"
    },
    render: function () {
            ....
            {
      });

问题是，它产生以下输出：

<div><div class="row">...</div></div>

如何摆脱外部 div？我尝试从视图中删除 tagName 属性，但它仍然放置一个 div？

【问题讨论】：

标签： jquery backbone.js

【解决方案1】：

更改您的模板以摆脱外部 div：

<div></div>
  ....

然后，告诉视图使用类名创建 div：

tagName: "div",
className: "row"

或如果您想保留当前模板，然后告诉 View 使用哪个 el（假设它已经存在于您页面上的某个位置）：

var testView = new TestView({el: $(".row")});

编辑您问是否可以在初始化程序中执行此操作？当然可以，但您需要确保挂钩事件：

initialize: function () {
    this.el = $(".row");
    this.delegateEvents();
    _.bindAll(this, 'clickbtn');
}

不过，老实说，前两个选项与 IMO 的耦合度更高。

【讨论】：

有没有在初始化器中分配它？ var TestView = Backbone.View.extend({ el: $('.row') etc?
你总是可以在初始化器中设置this.el，但是到那时，所有的事件都已经连接起来，所以你必须调用this.delegateEvents()（见编辑）。如果你不想传入它，你总是可以在调用“super”之前覆盖构造函数并在那里完成。

【解决方案2】：

另一个不需要修改模板的选项是使用setElement

setElement view.setElement(element)

如果您想将 Backbone 视图应用到不同的 DOM 元素，请使用 setElement，它还将创建缓存的 $el 引用并将视图的委托事件从旧元素移动到新元素。

这将允许您完全绕过 tagName。您可以将 tagName 排除在 View 定义之外（无论如何它默认为 div ）。您也不必担心手动委派您的事件或要求事先知道元素选择器，正如@Brian Genisio 的答案中所提到的那样，尽管其他方法也可以。

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

【讨论】：

你在这里错过了一个括号：this.setElement(this.template(this.model.toJSON()));