Question

我有以下模板：

<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？

Answer 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。

Answer 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;
}

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

2 个答案: