iCanHaz.js + Mustache 不会在数据对象中呈现第一行

Question

我有一个 JSON 数据对象和一个使用 Mustache 语法编写的 text/html javascript 模板。我使用 iCanHaz.js 作为模板解析器。

我的问题是数据对象的第一行没有显示出来。

这是我的 JS 代码：

 var data = jQuery.parseJSON('{"data":[{"title":"Title One"}, {"title":"Title Two"}]}');
 var html = ich.data_template(data);

还有我的 Mustache 模板：

<script type="text/html" id="data_template">
    {{#data}}
       {{title}}<br />
    {{/data}}   
</script>

以上代码将其输出为我渲染的 HTML：

<br />
Title Two<br />

如您所见，未显示 JSON 对象中的“Title One”。

有人知道为什么吗？我猜测这与我的 JSON 对象的结构不正确（数组/对象）有关。

非常感谢。

Answer 1

尝试将原始标志（第二个参数）设置为 true。

var data = jQuery.parseJSON('{"data":[{"title":"Title One"}, {"title":"Title Two"}]}');
var html = ich.data_template(data, true); #Note the true.

另外，你为什么把你的 JSON 写成一个字符串并解析它？你可以这样做：

var data = {"data": [{"title": "Title One"}, {"title": "Title Two"}]};
var html = ich.data_template(data, true);

如果没有原始标志，它会返回一个节点元素数组，您需要设置一个根级元素才能使其工作。

<script type="text/html" id="data_template">
    <div>
    {{#data}}
       {{title}}<br />
    {{/data}}   
    </div>
</script>

您可以通过在控制台中运行以下 JavaScript 来测试它。

ich.addTemplate('data_template', '{{#data}}{{title}}<br />{{/data}}');
var data = {"data": [{"title": "Title One"}, {"title": "Title Two"}]};
var html = ich.data_template(data, true);
console.log(html);

html = ich.data_template(data);

console.log(html);

ich.addTemplate('data_template_root', '<div>{{#data}}{{title}}<br />{{/data}}</div>');

html = ich.data_template_root(data, true);
console.log(html);

html = ich.data_template_root(data);

console.log(html);