在 Backbone.js 中填充嵌套的下划线模板答案

【问题标题】：Populating nested underscore templates in Backbone.js在 Backbone.js 中填充嵌套的下划线模板
【发布时间】：2014-03-26 10:43:27
【问题描述】：

我正在尝试从一个复杂的 JSON 对象创建一个 html 页面。我已经成功地将 JSON 对象解析为模型集合，其中每个模型都有另一个模型的集合等。

因此，我有嵌套视图来满足这一点。

要创建我的 html 页面，我有两个模板，如下所示：

<script type="text/template" id="template1">
        <h1><%=heading1%></h1>
        <h2><%=heading2%></h2>

        <ul id="template2-list"></ul>
</script>

<script type="text/template" id='template2'>
    <p class = "heading"><%-otherheading%></p>

<div class="content" id="tab">

    .....

</div>
</script>

如您所见，我有一个包含模板 2 列表的模板 (template1)。我将如何从我的 Backbone 嵌套视图中填充这些模板？

这是我尝试过的：

var CollectionView = Backbone.View.extend({

    type: "CollectionView", //For debugging purposes

    el: "#container", 

    initialize: function () {

    },

    render: function () {
        _.each(this.model.models, this.process, this);
        return this;
    },

    process: function(obj)
    {
        var childItemView = new View1({model: obj});
        childItemView.render();
        this.$el.append(childItemView.el); //This works fine since I only have one Model in the highest level collection
    }

})

var View1 = Backbone.View.extend({

    type: "View1",

    template: _.template($("#template1").html()),

    tagName: "div",
    className: "tableRow",

    initialize:function () {
        this.model.on("change", this.modelChanged, this);
    },

    render: function () {

        var outputHtml = this.template(this.model.toJSON());
        this.$el.html(outputHtml);

        this.model.get('nestedModel').each(this.process, this);

        return this;
    },

    process: function(obj) {

        var childItemView2 = new View2({model: obj});
        childItemView2.render();   

        childItemView2.el = '#template2-list';

        $(this.el).append(childItemView2.el); //This still results in template2 being placed after the entire template 1

    },

    modelChanged: function(model, changes) {
        console.log("modelChanged: " + this.model.get('title'));
    }

});

【问题讨论】：

标签： templates backbone.js views underscore.js underscore.js-templating

【解决方案1】：

如果只是填充下划线，那么您应该将集合转换为 json（包括子模型集合），并且您可以在模板内添加一个 for 循环。 .

另一个选择是，要使用像 marionette 这样的库，它有一个可以保存集合视图的复合视图，您可以在此处查看树视图的示例：http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/ 它基本上展示了如何在集合中呈现集合。

【讨论】：

【解决方案2】：

有很多方法可以做到这一点。

模板内的模板

通过调用父模板本身内部的子模板，传递整个集合并在模板本身中执行所有递归迭代逻辑。只涉及一个视图。

 <script type="text/template" id="template1">
    <h1><%=heading1%></h1>
    <h2><%=heading2%></h2>
    <ul id="template2-list">
       <!-- Your iteration logic goes here -->
       <%= _.template($("#template2").html())({model: model}) %>
    </ul>
 </script>
 <script type="text/template" id='template2'>
     <p class = "heading"><%-otherheading%></p>
     <div class="content" id="tab"></div>
 </script>

更好的方法是：

在集合视图中，创建一个子视图实例（你已经这样做了）
做递归迭代逻辑，读取集合视图（父视图）中的集合模型，调用子视图渲染子集合。

如果您想要一个完整的解决方案，请使用 json 和 html 创建一个小提琴。将帮助您实现它。

【讨论】：

我从没想过像您在第一个选项中那样做，但由于可能出现的可维护性问题，我想尽量避免这种情况。关于第二个选项，我不是已经这样做了吗？我遍历父集合中的所有模型，创建一个被渲染的新子视图实例。由于我的情况比这稍微复杂一些，因此我在子视图中执行相同的操作，因为它的模型中有一个集合。我看不出这样做如何让我将子视图呈现的内容嵌入父视图模板的特定位置？

【解决方案3】：

我意识到我的错误。不确定这是否完全正确，但我先渲染了父视图，然后找到了新的列表元素（template2-list）并将渲染的子视图附加到它上面。

即

render: function () {

    var outputHtml = ...

    this.$el.html(outputHtml); //render parent view

    this.model.get('nestedModel').each(this.process, this);

    ...
},

process: function(obj) {

    var childItemView2 = new View2({model: obj});
    childItemView2.render();   

    this.$('#template2-list').append(childItemView2.el); 

},

感谢大家的帮助！

【讨论】：