使用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>部分。

Update：也许是一个离题的问题，但这通常是解决这种情况的正确方法吗？我设想了一个充满模板的文件夹，当我需要它们的时候，我可以把它们拉进来并使用它们。通过ajax调用获取它们是正确的吗？

Answer 1

它与模板的结构无关，也与附录的使用无关。其他的事情也被搞砸了。我写了下面的小提琴来演示。如果希望比较模板，请将var template = "#Template1";设置为"#Template2"。

请参阅：http://jsfiddle.net/mcw0933/GnZ9M/

Answer 2

如果您没有使用ajax请求的成功方法，而是尝试使用承诺呢？

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

Answer 3

关于您的更新/侧问题，我认为这就是您处理这种情况的方法。

通常，您的模板在请求中不会很大(按字节大小计算)。但是，我认为根据当前的视图编写一个“在需要时包含相关模板”是非常简单的。注意，这是如何设置Rails来执行JS和CSS的，这样您就可以为每个给定的相关模型/视图实现一个类似于handlebars.html的东西，并在执行JavaScript之前设置一个标记，在页脚中提取这些视图。

然而，更好的方向更可能是预编译。http://handlebarsjs.com/precompilation.html。这里有一个很有前途的Rails-y选项：资产