如何使用 jQuery 提取动态加载的 mustache 模板的一部分答案

【问题标题】：How do I use jQuery to extract part of a dynamically loaded mustache template如何使用 jQuery 提取动态加载的 mustache 模板的一部分
【发布时间】：2012-03-04 03:39:26
【问题描述】：

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

<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'，但没有明显效果。

我意识到我可以通过使用部分来完成我想要的（不复制我的模板的一部分以供客户端和服务器端使用），并且它还有一个额外的好处是可以避免传输比我实际需要的更多的模板给客户只是把它扔掉，但这并不能回答我的问题。（感谢巧妙的解决方案）

谢谢

【问题讨论】：

我也可以使用整个模板并在 Mustache 渲染之后进行 jQuery 选择，如下所示： var render = Mustache.render(wholetemplate, data); $('#this').html($('#this',rendered).html());但我宁愿只得到我需要的模板部分。

标签： javascript jquery mustache

【解决方案1】：

问题已经发生在$('#this', data)，它通过浏览器的 HTML 解析器发送data 以将其转换为 DOM 片段。由于容错，HTML 解析器对模板做了它可以做的，但这不是你想要的，因为模板本身不是有效的 HTML。因此$('#this', data).anythingYouLike() 或$(data).anythingYouLike() 将不起作用。

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

考虑到这一限制，关于事件顺序有两个现实的选择：

将data 剥离为<tbody ...>...</tbody>（与一个正则表达式），然后是 Mustache 渲染，然后是 $tbody = $(renderedHTML)。
Mustache 完整渲染data，然后是$tbody = $(renderedHTML).find('tbody')

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

【讨论】：

【解决方案2】：

首先，你的模板不是一个好的表格结构（当然是模板），你做$(data)之后它会变成一个好的表格，像这样：

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

{{rows}} 不在表格元素中，所以你不能通过 $('#this', data).html(); 得到你想要的东西；

我的解决方案：

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

【讨论】：