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

【问题标题】：Is it possible to access jquery functions through a templating library like Handlebars?是否可以通过像 Handlebars 这样的模板库访问 jquery 函数？
【发布时间】：2012-02-02 03:50:15
【问题描述】：

用一个例子来解释这个问题可能最容易。

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

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

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

编辑：经过更多的挖掘，似乎没有一个 Javascript 的模板解决方案可以与数据上下文的 JSON 或 XML Dom 对象互换。他们似乎都假设为 json。

太棒了...我使用了许多可用于转换 xml2json 的 jquery 插件之一，并将该对象传递给 HandleBars，一切正常。

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

所以，我不得不这样做：

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

一切都很好。

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

【问题讨论】：

我将把答案交给 Shankar，因为 dot.js 实际上非常接近。我想我更喜欢 Handlebars 和 Mustache 的无逻辑模板设计，但 dot.js 绝对有用。

标签： jquery templates handlebars.js

【解决方案1】：

从handlebar documentation 看来，您可以将 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();
});

【讨论】：

我通读了有关辅助函数的文档，它可能会起作用。我的第一个想法是“呃，我需要一个单独的帮助器来处理我想要提取的每个 xml 元素”，但我想我可以做一些类似 Handlebars.registerHelper('find', function (someXML, name) { return someXML.查找（名称）。文本（）；}）；并将元素名称作为模板中的字符串参数传递：

{{body}}

xml 名称：{{找到 xmlData, 'name'}}

但这似乎有点 hackish...
@drventure 如果这就是模板插件要做的事情，这似乎不是什么黑客行为。我认为以这种方式使用它没有任何不利影响。
是的，hack 这个词可能太强了。尽管如此，这似乎会使模板比我想要的更混乱。使用 xml2json 例程并首先给车把提供它想要的东西似乎更干净。我想我只是在想肯定有一个模板库可以直接呈现 XML 数据。

【解决方案2】：

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

不过，您可以查看 Underscore templates 或 doT js，它们可能对您有所帮助。

【讨论】：

嗯，嗯，基于我目前看过的大多数模板引擎的文档，它们似乎都表明使用了“上下文”，也就是说，数据对象您传递给引擎以用于渲染目的。通过“this”，我的意思是引用传入的对象。当然，我上面的语法不正确。我只是想知道是否有办法。
我明白了你想说的，检查我编辑的答案可能对你有帮助。
没看过那些。我会检查出来的。谢谢！
这两个我都用过，其中的 doT js 速度非常快，你可以在模板中添加 jQuery 语句。

xml 名称：{{找到 xmlData, 'name'}}