嵌套模型模板 - 骨干和突出

Question

我有以下JSON：

var data = [ 
       { 
        "headline" : "This is headline", 
        "description": "This is description", 
        "icons": [ 
         { 
          "url" : "http://farm9.staticflickr.com/8356/8404884161_f1d3efe9d6_b.jpg", 
         }, 
         { 

          "url" : "http://farm9.staticflickr.com/8349/8167535290_d824c3e7d2_b.jpg" 
         } 
        ] 
       } 
      ]; 

与此模板：

<script type="text/template" id="items-tpl"> 
     <h1> <%= headline %> </h1> 
     <p> <%= description %> </p> 
     <ul> 
      <li><%= url %></li> 
     </ul> 
</script> 

什么是使用下划线的骨干，使这个最好的方法（或任何其他方法，不需要额外的库）

Answer 1

不需要主干，除非你想用它来比你的例子更多。用下划线这样做。

模板

<script type="text/template" id="items-tpl"> 
     <h1> <%= headline %> </h1> 
     <p> <%= description %> </p> 
     <ul> 
      <% for (var i=0; i < icons.length; i++) { %> 
      <li><%= icons[i].url %></li> 
      <% } %> 
     </ul> 
</script> 

的Html

<div id="renderedModel"></div> 

的JavaScript

var templateHtml = _.template($("#items-tpl").html(), data[0]); 

$("#renderedModel").append(templateHtml); 

Working fiddle here