嵌套模型模板 - 骨干和&下划线

时间:2013-07-07 10:44:01

标签: javascript backbone.js underscore.js

我有以下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>

使用下划线(或没有其他库的任何其他方法)在骨干网中呈现此内容的最佳方法是什么

1 个答案:

答案 0 :(得分:2)

不需要骨干,除非您想要使用它超过您的示例。用下划线做这个。

<强>模板

<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