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

Question

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

我在 HTML 页面中定义了一个车把模板：

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

我用车把渲染模板：

   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 模板系统。车把和灰尘似乎最有可能做到这一点，但到目前为止我还没有任何运气。

我看到一些迹象表明我可以将 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 文档 看来，您可以将 xml 传递到模板中并使用 Handlebars.registerHelper 帮助从 xml 中提取名称元素。

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();
});

Answer 2

您不能这样做，因为模板解析器不知道 this 是什么。在模板中，您只能使用您提供给它的数据。

不过，您可以查看 下划线模板 ://olado.github.com/" rel="nofollow">doT js 他们可能对你有帮助。