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

Question

我正在尝试从复杂的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> 

正如你所看到的，我有一个模板（模板1），它包含模板2的列表。我将如何去填充我的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')); 
    } 

}); 

Answer 1

如果它只是填充下划线，那么你应该收集转换成JSON（包括子模型的集合），并且可以添加一个for循环的模板里面。 <％的（VAR X ...％>

另一种选择是，使用像牵线木偶一个库，有可容纳集合视图复合视图，可以看到这里一个TreeView一个例子：http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/ 它基本上显示了如何使集合内的集合。

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

更好的方法是：

• 在集合视图中创建一个子视图实例（你已经做了）

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

如果你想要一个完整的解决方案，使用json和html创建一个小提琴。将帮助你使其工作。

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

}, 

感谢所有帮助！