Templates 在Backbone.js中填充嵌套下划线模板

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

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); 

},

因此，我有嵌套视图来满足这一需求

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); 

},

要创建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>

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); 

},

---

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

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); 

},

另一个选项是，要使用类似于木偶的库，该库具有可以保存集合视图的复合视图，您可以在此处看到树视图的示例：

---

它基本上展示了如何在集合中呈现集合。

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

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); 

},

模板内模板

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); 

},

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

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

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); 

},

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); 

},

更好的方法是：

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); 

},

• 在“集合”视图中，创建一个子视图实例（您已经这样做了）

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); 

},

• 执行递归迭代逻辑以读取集合视图（parentview）中的集合模型，并调用子视图来呈现子集合

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); 

},

---

如果您想要一个完整的解决方案，可以创建一个包含json和html的文件。我会帮你的。

我意识到了我的错误。不确定这是否完全正确，但我首先渲染了父视图，然后找到了新的列表元素（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); 

},

i、 e

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); 

},

---

谢谢你的帮助

我从未想过要像第一个选项中那样做，但由于可能出现的可维护性问题，我希望尽量避免这样做。关于第二种选择，我是否已经这样做了？我循环遍历父集合中的所有模型，创建一个新的子视图实例并进行渲染。因为我有一个稍微复杂一点的案例，所以我在子视图中也做了同样的事情，因为它的模型中有一个集合。我不知道这样做如何才能将子视图渲染的内容嵌入父视图模板的特定位置？

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); 

},