underscore.js - 如何在 text/html 内的下划线模板中包含数据源？

Question

这是我的代码

<script type="text/html" id='usageList'>
            <table cellspacing='0' cellpadding='0' border='1' >
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>LastName</th>
                    </tr>
                </thead>

                <tbody>
                    /* I want to include data source via ajax or some mechanism here */
                    <%_.each(items,function(item,key,list){ %>
                    <% var f = item.name; %><!-- create more variables -->
                    <% var l= item.lastName; %>
                    <tr>
                        <!-- use variables -->
                        <td><%= key %></td>
                        <td class="<%= f %>"><%= f %></td>
                        <td class="<%= l %>"><%= l %></td>
                    </tr>
                    <% }); %>
                </tbody>
            </table>
        </script>

Answer 1

首先，将模板放入变量中

var template = ​$(​'#usageList')​​​​​​​​​​​​​​.html();

然后，发出一个 Ajax 请求。使用_.template进程接收到的数据并将其添加到 DOM 节点

$.getJSON('ajax/test.json', function(data) {
    $('#output').html(_.template(template,{items:data}));
});

返回的数据必须遵循此格式

[
    {'name':'john', 'lastName':'M'},
    {'name':'jean', 'lastName':'N'},
    {'name':'carl', 'lastName':'K'},
    {'name':'peter', 'lastName':'B'}
]

检查这个 JSFiddle：http: //jsfiddle.net/jaimem/2gPYZ/