带有胡子 js 问题的 jQuery答案

【问题标题】：jQuery With Mustache js Issue带有胡子 js 问题的 jQuery
【发布时间】：2014-03-13 15:33:47
【问题描述】：

我在一个项目中使用 jQuery 和 Mustache Js。

我在脚本标签中有模板。该模板需要一些基于一些数据的动态/可变 html。因此，我使用 jQuery 加载模板，对其进行操作，然后将其写回到脚本标签中。

但是，使用 jquery 将模板加载到 div 中（用于操作）似乎会改变模板的结构（它会四处移动），从而使模板无效。

如何动态更新模板并避免此问题？（任何帮助/指针/等）

原始模板

<table>
    <thead>
        <tr>
            <td>FN</td>
            <td>SN</td>
            <td>OT</td>
        </tr>
    </thead>
    <tbody>{{#Users}}
        <tr class="tr-border" data-row-id="{{DCSID}}">
            <td class="td-border">{{FN}}</td>
            <td class="td-border">{{SN}}</td>
            <td class="td-border">{{OT}}</td>
        </tr>{{/Users}}</tbody>
</table>

使用 jquery 加载到另一个 div 会导致以下情况（将 {{#Users}} {{/Users}} 移出位置）

   {{#Users}} {{/Users}}
   <table>
        <thead>
            <tr>
                <td>FN</td>
                <td>SN</td>
                <td>OT</td>
            </tr>
        </thead>
        <tbody><tr class="tr-border" data-row-id="{{DCSID}}">
                <td class="td-border">{{FN}}</td>
                <td class="td-border">{{SN}}</td>
                <td class="td-border">{{OT}}</td>
            </tr></tbody>
    </table

下面的代码是我的做法。这也是一个js小提琴link here

var $newDcsTemplate = $('<div/>').html($('#dcs-template').html()); // for manipulation
var original1 = $('#dcs-template').html()
var original2 = document.getElementById('dcs-template').innerHTML;

// manipulate the template here and replace content of script tag with it.


console.log(original1); // works fine
console.log(original2) // works fine
console.log($newDcsTemplate.html()) // messed up the template

【问题讨论】：

标签： javascript jquery html templates mustache

【解决方案1】：

这样做，有.html()，没有</script>：

<table>
  <thead>
    <tr>
      <td>FN</td>
      <td>SN</td>
      <td>OT</td>
    </tr>
  </thead>
  <tbody>
    <!-- {{#Users}} -->
    <tr class="tr-border" data-row-id="{{DCSID}}">
      <td class="td-border">{{FN}}</td>
      <td class="td-border">{{SN}}</td>
      <td class="td-border">{{OT}}</td>
    </tr>
    <!-- {{/Users}} -->
  </tbody>
</table>

【讨论】：

【解决方案2】：

DOM 正在修改您的模板，因为您将它作为“HTML”插入到 <div> 中，但事实并非如此。如果你给它那个标记，它正在做浏览器会做的事情。它将{{# Users }} 放在最近的可用有效位置。

这与您的模板最初存储在<script> 标记中的原因相同。您应该始终使用<script> 标签来保存您的模板，并且您应该始终使用.text() 来读写它们：

var $newDcsTemplate = $('<script/>').text($('#dcs-template').text());
console.log($newDcsTemplate.text())

【讨论】：

谢谢。但是，为了能够编辑内容，您需要将其加载到除标记之外的其他内容中，因为当我想到但它时，我无法让 .find() 在 $newDcsTemplate 上工作确实适用于
您会遇到的问题是您不能使用 DOM 来操作不是有效 HTML 的内容，并且模板几乎永远不会是有效的 HTML。
嗯，使用我上面提供的示例，一旦我将模板提取到 div 标签中，我就可以操作 div 的内容下面的 sn-p 找到 id 为 dcs 的元素模板中的-type-list 没有问题 var $newDcsTemplate = $('
').html($('#dcs-template').html()); var $dcsTypeTable = $newDcsTemplate.find('#dcs-type-list');