javascript - template.js / artTemplate 模板引擎问题-PHP中文网问答

html<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="template-debug.js"></script>
</head>

<body>


<p id="content"></p>




<script id="test" type="text/html">
<ul>
    {{each }}
        <li>{{pinId }}</li>
    {{/each}}
</ul>
</script>





<script>
var data = [{"pinId":1,"userId":1}, {"pinId":2,"userId":2}, {"pinId":3,"userId":3}, {"pinId":4,"userId":4}];
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>


</body>
</html>

这样的json数据怎么用，必须要下面这样吗？

html<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="template-debug.js"></script>
</head>

<body>


<p id="content"></p>




<script id="test" type="text/html">
<ul>
    {{each list as val}}
        <li>{{val.pinId}}</li>
    {{/each}}
</ul>
</script>





<script>
var data = [{"pinId":1,"userId":1}, {"pinId":2,"userId":2}, {"pinId":3,"userId":3}, {"pinId":4,"userId":4}];
var dataList = {"list":data }
var html = template('test', dataList );
document.getElementById('content').innerHTML = html;
</script>


</body>
</html>

全部回复(3)

天蓬老师2017-04-10 14:52:46 3楼

你说的这个 template.js 不清楚具体是哪一个模板引擎，有文档没？

不过绝大多数的模板引擎都支持 this 来指向输入的对象，比如 {{each this}}{{/each}}，这种方式就适合你举例中的直接返回数组的情况。不过由于我不知道你说的到底是哪个模板引擎，所以不确定是否支持这样引用。

但是，更加推荐的做法是修改一下你的数据格式，你上面的例子可以变成：

javascriptvar html = template('test', { items: data });

如此一来模板里可以这么写了：

html{{each items as item}}
    <li>{{item.pinId}}</li>
{{/each}}

赞 +0

添加回复

怪我咯2017-04-10 14:52:46 2楼

我现在就在使用art-template这个模板引擎，我使用的是原生的语法，看你用的好像是简化的语法。
我觉得是你没理解透数据的引用，建议你多看看这个
https://github.com/aui/arttemplate

PHPz2017-04-10 14:52:46 1楼

这个问题我遇到过,可以直接使用{{each as item index}},如果list不传的话,底层会使用$data来代替