Question

为了避免重复，我试图在服务器端和客户端使用小胡子进行模板化。我有一个类似以下的模板：

<html>
<head>...</head>
<body>
  <table>
    <tbody id="#this">
      {{rows}}
      <tr>{{row}}<tr>
      {{/rows}}
    </tbody>
  </table>
</body>
</html>

这对我的服务器端模板很有用。然而，在客户端，我遇到了一些麻烦。我可以使用ajax成功加载模板，但我不需要整个事情来更新表的行。

$(function () {
    var template;
    $.ajax('templates/thetemplate.mustache', {
        success : function (data) {
            template = $('#this', data).html();
        },
        dataType : 'html'
    });
});

当我使用上面的jQuery获取#this元素的内容时，{{rows}}和{{/rows}}行将从结果中删除，而<tr>{{row}}</tr>它们之间成功返回。我怎样才能获得全部内容？

我尝试过$('#this', data).contents();会得到相同的结果，$('#this', data).val();会返回一个空字符串。使用$(data).find('#this')代替具有相同的三个结果。我也尝试将ajax调用的dataType设置为'text'，但效果不明显。

我意识到我可以通过使用partials来完成我想要的东西（不会复制我的模板的部分用于客户端与服务器端的使用），并且它会有额外的好处，即避免传输比实际需要更多的模板对客户来说只是把它扔掉了，但这并没有回答我的问题。（赞赏光滑的解决方案）

由于

Answer 1

首先，你的模板不是一个很好的表格结构（couse，它的模板），在你做$（数据）之后它会成为一个很好的表格，如下所示：

[" {{rows}} {{row}} {{/rows}} ", <table>…</table>]

{{rows}}不在table元素中，所以你无法得到你想要的$（'＃this'，data）.html（）;

我的解决方案：

data.replace(/\n/g, '').match(/<tbody id="#this">(.*)<\/tbody>/g)[0]

Answer 2

问题已经发生在$('#this', data)，它通过浏览器的HTML解析器发送data以将其转换为DOM片段。由于容错，HTML解析器会尽其所能地使用模板，但它不是您想要的，因为模板本身不是有效的HTML。因此，$('#this', data).anythingYouLike()或$(data).anythingYouLike()将无效。

由于HTML在提交给浏览器的HTML解析器之前必须有效，因此除了在使用$(renderedHTML)表达式向浏览器提交有效HTML之前执行Mustache呈现，别无选择。

考虑到这种约束，有两个关于事件顺序的现实选择：

将data简化为<tbody ...>...</tbody>（带有一个正则表达式），然后是Mustache渲染，然后是$tbody = $(renderedHTML)。
小胡子完整呈现data，然后$tbody = $(renderedHTML).find('tbody')

据我所知，任何一种方法都可行。在这两种情况下，您最终得到一个jQuery对象$tbody，其中包含一个填充的tbody节点，然后可以使用$tbody.appendTo($('#myTable'))或类似的方式将其插入到DOM中。

如何使用jQuery提取动态加载的胡子模板的一部分

2 个答案: