javascript - 复杂的 jQuery 模板

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" }, ...]
}))