jquery - 是否可以通过像 Handlebars 这样的模板库访问 jquery 函数？

Question

用一个例子来解释这个问题可能是最简单的。

我在 HTML 页面中定义了一个 Handlebars 模板:

   <script id="myTemplate" type="text/html">
      <h1>{{fieldname}}</h1>
   </script>

我用 Handlebars 渲染模板:

   var source = $("#myTemplate").html();
   var template = Handlebars.compile(source);
   var txt = template(jsonObj);

和 txt 最终包含渲染的 html 文本。没问题。

但是...

假设我已经通过 ajax 检索了一个 XML 文件，并且我想使用 jquery 来访问它以呈现元素。

为了从父元素中检索“name”子元素的值，我可能会像这样使用 jquery:

   $(xml).find('name').text()

所以，我认为我的模板可能看起来像这样:(注意这不起作用!)

   <script id="myTemplate" type="text/html">
      <h1>{{$(this).find('name').text()}}</h1>
   </script>

编辑:显然，这是行不通的。

我也尝试过

{{this.find('name').text()}}

甚至

{{.find('name').text()}}

但是这些都不起作用，到目前为止我还找不到任何可以做这样的事情的 JS 模板系统。 Handlebars 和灰尘似乎最有可能做到这一点，但到目前为止我还没有任何运气。

我看到一些迹象表明我可以将 XML 转换为 JSON，然后将其作为上下文传递，这确实可能是唯一的方法。

这比我想象的容易吗？不可能吗？

编辑:经过更多挖掘后，似乎没有一个 Javascript 模板解决方案可以与数据上下文的 JSON 或 XML Dom 对象互换使用。它们似乎都采用 json。

Soooo...我使用了众多可用的 jquery 插件之一来转换 xml2json，并将该对象传递到 HandleBars 中，一切顺利。

我遇到的唯一技巧是，如果您对 XML 数据执行 JQUERY 查询来查找特定元素，您得到的将是 XML dom 对象的数组，即使只有 1 个结果。

所以，我必须做这样的事情:

var txt = template($.xml2json($(xml).find('myelementname')[0]));

一切都很好。

我可能会提出另一个问题，关于是否有人知道采用 json 或 xml dom 对象的 Javascript 模板引擎。

Answer 1

来自handlebar documentation看起来您可以将 xml 传递到模板中并使用 Handlebars.registerHelper 帮助从 xml 中提取 name 元素。

var context = { xmlData: xml, body: "I Love Handlebars!" };

<div class="post">
  <div class="body">{{body}}</div>
  <h2>The xml name:{{findName xmlData}}</h2>
</div>

//Register a helper
Handlebars.registerHelper('findName', function (someXML) {
  return someXML.find('name').text();
});