迭代
如果在渲染模板时,想要循环输出数组的内容,可以使用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');效果: