使用 Handlebars.js 模板答案

【问题标题】：Using a Handlebars.js Template使用 Handlebars.js 模板
【发布时间】：2013-11-04 16:34:34
【问题描述】：

我是使用模板的新手，我有一个关于重用模板的问题。加载时，我得到模板和数据：

$(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>

只有在 initial 页面加载时，它才会拉入整个结构，但是当我想追加额外的行时，它只会追加 <tr> 部分。

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

【问题讨论】：

应该是{{#each users}}.. 错字？
不，这行不通。无论如何，无论哪种方式，我都会得到数据。它只是不会在之后追加。
这应该可以。如果您仍然有问题，如果您为此设置演示，我可以帮助您。
你能调试javascript代码并检查more.php用户数据是否正确以及window.template(data)是否生成正确的html？

标签： javascript jquery templates handlebars.js

【解决方案1】：

这与您的模板结构或附加的使用无关。其他东西正在被弄脏。我写了下面的小提琴来演示。如果您想比较模板，请将var template = "#Template1"; 设置为"#Template2"。

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

【讨论】：

【解决方案2】：

如果不使用 ajax 请求的成功方法，而是尝试使用 Promise 会怎样？

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

【讨论】：

【解决方案3】：

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

一般来说，您的模板在请求中不会很大（按字节计算）。但是，我认为根据您当前所在的视图编写“在需要时包含相关模板”很简单。注意，这是将 Rails 设置为执行 JS 和 CSS 的方式，因此您可以实现一些东西比如为每个给定的相关模型/视图设置一个handlebars.html，并设置一个标签，在执行 JavaScript 之前将这些视图拉入页脚。

但是，更好的方向是预编译。 http://handlebarsjs.com/precompilation.html。这是一个很有前途的 Rails-y 选项：https://github.com/leshill/handlebars_assets

【讨论】：

【解决方案4】：

关于你的第一个问题，我认为正如有人已经指出的那样，正确的语法是：

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

（当然，除非您创建了自定义助手“用户”。）

改变了，它仍然无法工作：你是在 IE 8 还是 7 中测试它？ Internet Explorer 7 或 8 具有 innerHTML property read-only for tables，因此您必须使用解决方法...

关于将整个表格放入模板的问题：可以。

当请求更多数据时，如果表在那里，您可以追加新行。

当然，如果您还必须与 IE 兼容，您必须创建一个比前一个更大的新表作为解决方法。

在这种情况下the use of partials 可能很有用：表格将是通用模板，而行将是它的一部分。

关于 AJAX 调用，因为模板通常很小，我会使用 if/else 语句，以便在编译页面时，您需要的所有模板都已经准备好使用 - 并使用 AJAX 调用来获取只是数据。

【讨论】：

【解决方案5】：

当我想追加一行时如何重用这个模板？

我需要一个演示设置来帮助你调试这个程序，试试jsfiddle.net。

另外，是否可以将整个表结构都这样放在模板文件中？

是的。

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

我所做的是使用requirejs 将模板加载为模块依赖项：

使用requirejs "text" plugin 将模板文件添加为依赖项。
在我的构建脚本中：

一个。模板文件已编译。

b.编译后的模板文件（现在是 javascript 文件）使用 requirejs 中包含的 "r.js" optimizer 与其余 javascript 文件一起优化。
结果是模板包含在一个压缩的 javascript 文件中，该文件包含该站点的所有其余 javascript 文件。我还将它设置为根据用户权限加载不同的 javascript 包，因为我知道某些用户不会执行他们无法执行的 JavaScript，因为他们没有执行用户功能的用户权限执行 JavaScript。

互联网上散布着许多教程，介绍了如何进行设置。如果你决定走这条路，请告诉我，我会发布更多资源。

【讨论】：