关于匿名数组遍历的问题,即数据类型都要求json格式:{name:数组},
如:
var data = { list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] };
实际使用时候,返回数据的接口直接返回了一个数组
['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
自行命名拼装比较麻烦,就研究了下能否直接使用匿名数组,经验证是可以的,示例如下:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>basic-demo</title> <script src="./template-web.js"></script> </head> <body> <div id="content"></div> <script id="test_original" type="text/html"> test_original示例 <ul> {{each list value i}} <li>索引 {{i + 1}} :{{value}}</li> {{/each}} </ul> </script> <script id="test_simplify" type="text/html"> test_simplify示例(即test_original的语法简化版) <ul> {{each list}} <li>索引{{$index}} :{{$value}}</li> {{/each}} </ul> </script> <script id="test_anonymous" type="text/html"> test_anonymous示例 <ul> {{each $data}} <li>索引{{$index}} :{{$value}}</li> {{/each}} </ul> </script> <script> var data = { list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var data_anonymous = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']; //var html = template('test_original', data); //var html = template('test_simplify', data); var html = template('test_anonymous', data_anonymous); document.getElementById('content').innerHTML = html; </script> </body> </html>
如果是对象数组,使用对象属性,可以使用如:
{{$value.name}}
需要注意的是,匿名使用时
{{each $data}} {{$index}} {{$value}}
是固定的,尤其是{{each $data}}中的data不随template(‘test_anonymous’, data_anonymous)第二个参数名变化而变化