迭代
如果在渲染模板时,想要循环输出数组的内容,可以使用each属性,如下:
var template = '<li each="{items}"><span>姓名:{name}</span>---<span>年龄:{age}</span></li>';
riot.tag('person', template, function(opts) {
this.items = opts;
})
riot.mount('person', [{name:'张三', age:12},{name:'李四', age:13}]);
在<li>上添加each属性,使<li>重复渲染,从而显示多个person信息。
效果:

如果要渲染的数组元素不是对象,而是诸如 字符串、数字等基本类型的,需要使用{ name, i in items }形式,name是数组元素,i是数组下标。
例如:
var template = '<p each="{ name, i in items }">{ i }: { name }</p>';
riot.tag('person', template, function(opts) {
this.items = opts;
})
riot.mount('person', ['aaa', 'bbb']);
效果:

还有一种情况,如果渲染的不是数组,而是普通对象的画,也可以使用上面的语法,{ name, value in obj } name是属性名,value是对应的属性值。
例如:
var template = '<p each="{ name, value in obj }">{ name } = { value }</p>';
riot.tag('person', template, function(opts) {
this.obj = this.obj = {
key1: 'value1',
key2: 1110.8900,
key3: Math.random()
};
})
riot.mount('person');
效果:
