前文回顾
riot.js教程【五】标签嵌套、命名元素、事件、标签条件
riot.js教程【四】Mixins、html内嵌表达式
riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期;
riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法;
riot.js教程【一】简介;
可以通过each属性来达到标签循环,如下:
- <todo>
- <ul>
- <li each={ items } class={ completed: done }>
- <input type="checkbox" checked={ done }> { title }
- </li>
- </ul>
- this.items = [
- { title: 'First item', done: true },
- { title: 'Second item' },
- { title: 'Third item' }
- ]
- </todo>
在上面的代码中,具有each属性的元素,会被重复N次,N等于items数组的元素数量;
当你通过push,slice,splice改变数组数量的时候,DOM元素也会随之变化
所有被循环的元素,都拥有自己的上下文,请看如下代码:
- <todo>
- <div each={ items }>
- <h3>{ title }</h3>
- <a onclick={ parent.remove }>Remove</a>
- </div>
- this.items = [ { title: 'First' }, { title: 'Second' } ]
- remove(event) {
- // looped item
- var item = event.item
- // index on the collection
- var index = this.items.indexOf(item)
- // remove from collection
- this.items.splice(index, 1)
- }
- </todo>
在被循环的元素内部,想访问数组子对象的属性,可以直接访问,如:{title}
如果想访问父元素的属性,就需要加上parent,比如:{ parent.remove },因为上下文不一致了
在 parent.remove方法中,可以使用event.item对象访问当前数组元素的属性,
parent.remove方法执行完之后,会执行父组件的update事件;
当在一个父组件实例执行this.update()的时候 ,该父组件下的所有子组件都会更新,
一个自定义的标签也可以被标记为循环标签,如下:
- <todo-item each="{ items }" data="{ this }"></todo-item>
你可以通过data="{ this }"把当前标签的实例传递给todo-item的实例
循环的数组元素不一定是对象,如下:
- <my-tag>
- <p each="{ name, i in arr }">{ i }: { name }</p>
- this.arr = [ true, 110, Math.random(), 'fourth']
- </my-tag>
与简单数组循环相对,下面的代码是对象属性循环
- <my-tag>
- <p each="{ value, name in obj }">{ name } = { value }</p>
- this.obj = {
- key1: 'value1',
- key2: 1110.8900,
- key3: Math.random()
- }
- </my-tag>
注意,对象属性循环有性能问题,不推荐使用;
riotjs是通过JSON.stringify来判断对象是否有变更,以此来决定是否要更新HTML元素
你可以在循环标签的时候,使用key属性
- <loop>
- <ul>
- <li each={ user in users } key="id">{ user.name }</li>
- </ul>
- <script>
- this.users = [
- { name: 'Gian', id: 0 },
- { name: 'Dan', id: 1 },
- { name: 'Teo', id: 2 }
- ]
- </script>
- </loop>
你甚至可以给key属性赋值为方法
- <loop>
- <ul>
- <li each={ user in users } key={ user.id() }>{ user.name }</li>
- </ul>
- <script>
- this.users = [
- { name: 'Gian', id() { return 0 } },
- { name: 'Dan', id() { return 1 } },
- { name: 'Teo', id() { return 2 } }
- ]
- </script>
- </loop>
有的时候,你需要循环多个标签,但是你又不想在这多个标签上面套一个wrapper,
这个时候你就可以用虚拟标签,代码如下:
- <dl>
- <virtual each={item in items}>
- <dt>{item.key}</dt>
- <dd>{item.value}</dd>
- </virtual>
- </dl>
你可以在虚拟标签上添加if 或者 data-is属性
- <virtual data-is="my-tag" if={condition}>
- <p>Show me with no wrapper on condition</p>
- </virtual>
HTML元素标签
你可以把HTML元素当作riot标签使用,但只能在body内这么用,如下:
- <ul data-is="my-list">
- </ul>
- riot.mount('my-list')
当你碰到这种情况的时候,你需要使用data-is属性
- <my-fancy-options>
- <option>foo</option>
- <option>bar</option>
- </my-fancy-options>
- <!-- 下面的代码是错误的, 一个 select 标签 只允许出现<option> 子元素 -->
- <select>
- <my-fancy-options />
- </select>
- <!-- 下面的代码是正确的 因为渲染 <option> 标签时会使用 <select> 作为父标签 -->
- <select data-is='my-fancy-options'></select>
本系列写完了,祝好!
来源: http://www.cnblogs.com/liulun/p/7851839.html