Question

鉴于这些模板：

<script id="template1" type="layout">
    Template 1 contents
</script>

<script id="template2 type="layout">
   Template 2 contents
   <section class="subview"></section>
</script>

这个视图设置：

var View1 = Backbone.LayoutView.extend({
    template: "#template1"
});

var View2 = Backbone.LayoutView.extend({
    template: "#template2",
    views: {
        ".subview": new View1();
    }
});

我得到了这个输出：

Template 2 contents
<section class="subview"><div>Template 1 contents</div></section>

我怎样才能获得此输出？

Template 2 contents
<section class="subview">Template 1 contents</section>

Answer 1

我会在你的模板中使用以下内容，保持模板1的模板相同：

<script id="template2 type="layout">
    Template 2 contents
</script>

然后在你看来

var View2 = Backbone.LayoutView.extend({
    template: "#template2",
    beforeRender: function() {
        this.insertView(new View1());
    }
});

var View1 = Backbone.LayoutView.extend({
    template: "#template1",
    tagName: "section",
    className: "subview"
});

这会给你以下

<div>
   Template 2 contents
   <section class="subview">Template 1 contents</section>
</div>

除非通过指定tagName属性，否则我找不到删除'div'的其他方法。

Answer 2

如果template1有内容：

<div class="myContents"></div>

然后您可以使用jQuery的unwrap()删除主干布局管理器中的元素afterRender()函数

afterRender: function() {
    this.getView('.subView').$el.find('.myContents').unwrap();        
},

我可以阻止Backbone LayoutManager生成额外的<div> s？</div>

2 个答案: