Templates 主干视图/模板的使用是否更像典型的服务器端MVC模板，而不是空容器和大量附件？

一位前端开发人员向我提出了这个问题，我不确定如何表达我的立场，但他让我思考：

因此，主干（或Backbone.marionete）中的约定是呈现与模板关联的视图，然后将结果视图的构造/合成HTML转储或附加到现有容器中，例如：

this.$el.append(this.subview.render().$el);

但是，这当然需要页面上已经呈现的DOM元素将新呈现的视图转储到中。这导致了如下现象：

<ul id="scheduler-loadroutegroups" class="full-height"></ul>

也就是说，最终需要内容的空容器

显然，这种呈现和附加模式是主干网的核心概念，拥有容器来放置内容似乎是绝对必要的

我同事的问题是，是否有可能使用更服务器端的MVC模板模式，在这种模式中，您不需要任何空容器：

<ul id="scheduler-loadroutegroups" class="full-height">
    {{#developers}}
        <ul>
            {{#pets}}
                <li>{{name}}</li>
            {{/pets}}
        </ul>
    {{/developers}}
</ul>

{{{#开发者}}

{{{宠物}
{{name}}
{{/pets}

{{/developers}}

在本例中，假设开发者表示模型的集合，宠物表示模型的集合。它们每个都需要自己的视图/子视图，以及附加到它们的事件

我的假设是，更经典的服务器端MVC模板系统的问题是，视图及其相关模板将丢失主干所依赖的对上下文限制和事件绑定的细粒度控制

---

我看到的所有主干示例/文档都使用这种“空容器/附加”模式是否可以用其他方式做事情？为什么或者为什么不？

主干视图需要一个DOM元素，并尽可能提供属性以简化其创建，但没有任何东西强迫您使用模板引擎或DOM操作。您可以使用现有的标记结构，只需将视图附加到正确的DOM节点即可

假设呈现的HTML如下所示

<ul id='scheduler-loadroutegroups'>
    <li id='d1'>
    <ul>
        <li id='p1'>P1</li>
        <li id='p2'>P2</li>
    </ul>
    </li>
    <li id='d2'>
    <ul>
        <li id='p3'>P3</li>
        <li id='p4'>P4</li>
    </ul>
    </li>
</ul>

请参见演示

当然，你可以更进一步，重新发表你的观点，这些问题可能会帮助你进一步挖掘

---

在某些情况下，它需要附加到DOM，但在渲染方法中不需要这样做（请记住，

el

不需要是现有元素）。我想我们需要澄清“附加到DOM”的含义。如果整个模板都是预呈现的（在没有空容器的意义上），我想您可以使用.setElement（）将视图附加到DOM的特定部分？不完全是，它会将视图的

el

更改为“新元素”（重新委派事件哈希），但是，您可以随时将其插入DOM上的某个元素（包括仅将其附加到主体（您可能不想这样做））。但是，如果所有模板逻辑都已经在（父）模板中，该模板可能已经呈现并转储到DOM中，则所有子级都将跳过“插入DOM”步骤（例如我的示例中的“开发人员”和“宠物”），不是吗？我不确定我是否完全理解您的意思，您可以完全呈现父模板（包括所有子模板）然后将其转储到DOM中，以后任何呈现的子元素都可以插入到父元素中，而父元素已经在DOM中了。非常有趣，非常感谢。出于好奇，您是否看到将视图附加到现有DOM结构与创建结构/视图相比有什么好处或坏处irely on the fly？@J.KyMarsh渐进式增强、SEO和应用程序引导将列在优点列中，双客户端/服务器呈现将列在缺点列中。直接操作DOM可能更容易理解或维护。

<ul id='scheduler-loadroutegroups'>
    <li id='d1'>
    <ul>
        <li id='p1'>P1</li>
        <li id='p2'>P2</li>
    </ul>
    </li>
    <li id='d2'>
    <ul>
        <li id='p3'>P3</li>
        <li id='p4'>P4</li>
    </ul>
    </li>
</ul>

var DevListView = Backbone.View.extend({
    initialize: function() {
        this.inject();
    },

    inject: function() {
        var $el = this.$el;

        this.collection.each(function (model) {
            var subview = new DevView({
                el: $el.find("#d" + model.id),
                model: model
            });
        });
    }
});

var DevView = Backbone.View.extend({
    initialize: function() {
        this.inject();
    },

    inject: function() {
        var $el = this.$el;

        this.model.pets.each(function (model) {
            var subview = new PetView({
                el: $el.find("#p" + model.id),
                model: model
            });
        });
    }
});

var PetView = Backbone.View.extend({
    events: {
        'click ': function () {
            this.$el.toggleClass('selected');

            var msg = '<p>Pet '+this.model.get('id')+'</p>';
            $('body').append(msg);
        }
    }
});

var Developer = Backbone.Model.extend({
    initialize: function () {
        this.pets = new Backbone.Collection(this.get('pets'));
    },
    parse: function (data) {
        this.pets.reset(data.pets);
        return data;
    }
});
var Developers = Backbone.Collection.extend({
    model: Developer
});
var v = new DevListView({
    el: '#scheduler-loadroutegroups',
    collection: devs
});