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

How do I use jQuery to extract part of a dynamically loaded mustache template

本文关键字：一部分 加载 何使用 jQuery 提取 动态      更新时间：2023-09-26

为了避免重复，我尝试在服务器端和客户端使用splash模板。我有一个模板，如下所示：

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

我意识到，通过使用部分模板，我可能可以实现我想要的（不复制部分模板供客户端和服务器端使用），而且它还有一个额外的好处，那就是避免将比我实际需要的更多的模板转移到客户端，只为了把它扔掉，但这并不能回答我的问题。（尽管很欣赏巧妙的解决方案）

感谢

问题已经发生在$('#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中。

首先，你的模板不是一个好的表结构（当然是couse，它是模板），在你做了$（data）之后，它会变成一个好表，类似这样：

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

｛｛行｝｝不在表元素中，因此您无法通过$（'#this'，data）.html（）获得所需内容；

我的解决方案：

data.replace(/'n/g, '').match(/<tbody id="#this">(.*)<'/tbody>/g)[0]
相关文章：