js循环解析html标签,riot.js教程【六】循环、HTML元素标签

循环

可以通过each属性来达到标签循环，如下：

• { title }

this.items = [

{ title: 'First item', done: true },

{ title: 'Second item' },

{ title: 'Third item' }

]

在上面的代码中，具有each属性的元素，会被重复N次，N等于items数组的元素数量；

当你通过push，slice，splice改变数组数量的时候，DOM元素也会随之变化

上下文

所有被循环的元素，都拥有自己的上下文，请看如下代码：

{ title }

Remove

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)

}

在被循环的元素内部，想访问数组子对象的属性，可以直接访问，如：{title}

如果想访问父元素的属性，就需要加上parent，比如：{ parent.remove }，因为上下文不一致了

在 parent.remove方法中，可以使用event.item对象访问当前数组元素的属性，

parent.remove方法执行完之后，会执行父组件的update事件；

当在一个父组件实例执行this.update()的时候 ，该父组件下的所有子组件都会更新，

自定义的循环标签

一个自定义的标签也可以被标记为循环标签，如下：

你可以通过data="{ this }"把当前标签的实例传递给todo-item的实例

简单数组循环

循环的数组元素不一定是对象，如下：

{ i }: { name }

this.arr = [ true, 110, Math.random(), 'fourth']

对象属性循环

与简单数组循环相对，下面的代码是对象属性循环

{ name } = { value }

this.obj = {

key1: 'value1',

key2: 1110.8900,

key3: Math.random()

}

注意，对象属性循环有性能问题，不推荐使用；

riotjs是通过JSON.stringify来判断对象是否有变更，以此来决定是否要更新HTML元素

key属性

你可以在循环标签的时候，使用key属性

• { user.name }

this.users = [

{ name: 'Gian', id: 0 },

{ name: 'Dan', id: 1 },

{ name: 'Teo', id: 2 }

]

你甚至可以给key属性赋值为方法

• { user.name }

this.users = [

{ name: 'Gian', id() { return 0 } },

{ name: 'Dan', id() { return 1 } },

{ name: 'Teo', id() { return 2 } }

]

虚拟标签

有的时候，你需要循环多个标签，但是你又不想在这多个标签上面套一个wrapper，

这个时候你就可以用虚拟标签，代码如下：

{item.key}

{item.value}

你可以在虚拟标签上添加if 或者 data-is属性

Show me with no wrapper on condition

HTML元素标签

你可以把HTML元素当作riot标签使用，但只能在body内这么用，如下：

riot.mount('my-list')

当你碰到这种情况的时候，你需要使用data-is属性

foo

bar

本系列写完了，祝好！