Question

对于一些简单的数据结构，使用jQuery模板很容易。

<script type="jquery/x-jquery-tmpl" id="myTemplate">
  <li> ${Element} </li>
</script>

var elements = [
   { Element: "Hydrogen" },
   { Element: "Oxygen"   },
   { Element: "Nitrogen" }
];

$("#elementsPlaceholder").replaceWith($("#myTemplate").tmpl(elements));

但是，如果我需要一个模板来处理更复杂的数据？类似的东西：

<script type="jquery/x-jquery-tmpl" id="myTemplate">
  <div> ${Molecule} </div>
  consists of:
  <ul>
      <li> ${Element} </li>
  </ul>
</script>

如何应用数据？可能吗？你能告诉我一个例子吗？

Answer 1

<ul>
    <li> ${Element} </li>
</ul>

应该使用{{each}}

<ul>
  {{each Elements}}<li>${$value.Element}</li>
</ul>

然后你传入分子和元素

$("#elementsPlaceholder").replaceWith($("#myTemplate").tmpl({
  Molecule: ...
  Elements: [{ Element: "Hydrogen" }, ...]
}))

复杂的jQuery模板

1 个答案: