Riot.js:不足1K的MVP客户端框架(3)
2015-01-25 15:55 阅读(176)

迭代

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




返回顶部