关于匿名数组遍历的问题,即数据类型都要求json格式:{name:数组},
如:
1 2 3 |
var data = { list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; |
实际使用时候,返回数据的接口直接返回了一个数组
1 |
['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] |
自行命名拼装比较麻烦,就研究了下能否直接使用匿名数组,经验证是可以的,示例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!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)第二个参数名变化而变化