javascript - 嵌套模型模板 - 主干和下划线

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