iCanHaz.js+胡子没有't渲染数据对象中的第一行

iCanHaz.js + Moustache doesn't render first row in data object

本文关键字:对象 数据 一行 js+ iCanHaz      更新时间:2023-09-26

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

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

这是我的JS代码:

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

还有我的胡子模板:

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

上面的代码将其输出为我渲染的HTML:

<br />
Title Two<br />

正如您所看到的,JSON对象中的"标题一"没有显示。

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

非常感谢。

尝试将原始标志(第二个参数)设置为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);