3

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

$(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 调用获取它们是否正确？

4

5 回答 5

0

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

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

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

于 2013-11-11T15:18:00.710 回答
0

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

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

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

是的。

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

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

  1. 使用requirejs "text" 插件将模板文件添加为依赖项。

  2. 在我的构建脚本中：

    一个。模板文件被编译。

    湾。编译的模板文件（现在是 javascript 文件）使用requirejs 中包含的“r.js”优化器与其余的 javascript 文件一起优化。

  3. 结果是模板包含在一个压缩的 javascript 文件中，该文件包含该站点的所有其余 javascript 文件。我还将它设置为根据用户权限加载不同的 javascript 包，因为我知道某些用户不会执行他们无法执行的 JavaScript，因为他们没有执行用户功能的用户权限执行 JavaScript。

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

于 2013-11-13T15:37:07.450 回答
0

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

function loadMore() {
    $.ajax({
        type : 'POST',
        url : '/data/more.php',
        dataType : 'json'
    }).promise().always(function(data){
       $('#user-list tbody').append(window.template(data));
  });
}
于 2013-11-11T11:10:47.407 回答
0

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

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

于 2013-11-05T17:57:16.850 回答
0

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

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

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

改变了它，它仍然无法正常工作：你是在 IE 8 还是 7 中测试它？Internet Explorer 7 或 8对表具有只读innerHTML属性，因此您必须使用一种解决方法...

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

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

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

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

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

于 2013-11-12T19:39:25.980 回答