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

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

javascript jquery

Javascript 如何使用jQuery提取动态加载的mustache模板的一部分,javascript,jquery,mustache,Javascript,Jquery,Mustache,为了避免重复，我尝试在服务器端和客户端都使用mustach进行模板制作。我有一个类似以下内容的模板： <html> <head>...</head> <body> <table> <tbody id="#this"> {{rows}} <tr>{{row}}<tr> {{/rows}} </tbody> </table>

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

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

然而，当我使用上面的jQuery获取该元素的内容时，{{rows}和{{/rows}行从结果中剥离，而它们之间的{row}行成功返回。我怎样才能得到全部内容

我试过$this'，data.contents；它给出了相同的结果，$'this'，data.val；返回一个空字符串。使用$data.find'this'会得到三个相同的结果。我还尝试将ajax调用的数据类型设置为“text”，但没有明显效果

我意识到，我可能可以通过使用partials来完成我想要的任务，而不是复制部分模板供客户端和服务器端使用，并且这将有额外的好处，可以避免将比我实际需要的更多的模板转移到客户端，只是为了将其扔掉，但这并不能回答我的问题。非常感谢那些圆滑的解决方案

谢谢

首先，您的模板不是一个好的表结构，它是模板，在您完成$data后，它将成为一个好的表，如下所示：

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

{{rows}}不在表元素中，因此您无法通过$'this'，data.html获得所需内容

我的解决方案：

问题已经发生在$'this'，data上，它通过浏览器的HTML解析器发送数据以将其转换为DOM片段。由于具有容错性，HTML解析器会尽其所能处理模板，但这不是您想要的，因为模板本身不是有效的HTML。因此，$'this'，data.anythingYouLike或$data.anythingYouLike将不起作用

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

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

将数据剥离到。。。具有一个正则表达式，然后是Mustache render，然后是$tbody=$renderedHTML。 Mustache完整呈现数据，然后$tbody=$renderedHTML.find'tbody'

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

我还可以使用整个模板，在Mustache呈现后执行jQuery选择，如下所示：var rendered=Mustache.renderwholetemplate，data；$'this'.html$'this'，rendered.html；但我宁愿只得到我需要的模板部分。

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

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