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

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

这比我做出来容易吗？不可能？

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

Soooo ...我使用了许多可用于转换xml2json的jquery插件中的一个，并将THAT对象传递给HandleBars，一切都在游戏中。

我遇到的唯一技巧是，如果你对XML数据执行JQUERY查询以查找特定元素，那么你得到的是一个ARRAY of 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();
});

Answer 2

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

但是，您可以查看Underscore templates doT js他们可能对您有所帮助。

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

2 个答案: