javascript - 使用 Handlebars.js 模板

Question

我刚开始使用模板，并且对重用它们有疑问。加载时，我获取模板和数据:

$(function() {
    var source, content;
    $.get('/templates/template.html', function(data) {
        source = data;
    })
    $.getJSON("/data/data.php", function(data) {
        content = data;
    })
    $(document).ajaxStop(function() {
        window.template = Handlebars.compile(source);
        $('#user-list tbody').html(window.template(content));
    })
})

模板如下:

{{#users}}
<tr>
    <td> {{name}} </td>
</tr>
{{/users}}

这是同一文件中的 HTML:

<div id="content-div">
    <table id="user-list">
        <thead></thead>
        <tbody></tbody>
    </table>
</div>

当我想追加一行时，如何重用此模板？例如:

function loadMore() {
    $.ajax({
        type : 'POST',
        url : '/data/more.php',
        dataType : 'json',
        success : function(data) {
            $('#user-list tbody').append(window.template(data));
        }
    });
}

它获取数据但不会附加到tbody 。这是为什么？

更新:另外，是否可以将整个表结构放入模板文件中？

<table id="user-list">
    <thead></thead>
    <tbody>
        {{#users}}
        <tr>
            <td> {{name}} </td>
        </tr>
        {{/users}}
    </tbody>
</table>

只有在初始页面加载时，它才会拉入整个结构，但是当我想要附加其他行时，它只会附加<tr>部分。

更新:也许是一个题外话，但这通常是处理这种情况的正确方法吗？我设想有一个充满模板的文件夹，我可以在需要时将其拉入并使用它们。通过 ajax 调用获取它们是否正确？

Answer 1

它与模板的结构或附加的使用无关。还有其他事情正在变得困惑。我写了下面的 fiddle 来演示。如果您想比较模板，请将 var template = "#Template1"; 设置为 "#Template2"。

参见:http://jsfiddle.net/mcw0933/GnZ9M/