循環(huán)

可以通過each屬性來達到標簽循環(huán)，如下：

• { title }

this.items = [

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

{ title: 'Second item' },

{ title: 'Third item' }

]

在上面的代碼中，具有each屬性的元素，會被重復N次，N等于items數(shù)組的元素數(shù)量；

當你通過push，slice，splice改變數(shù)組數(shù)量的時候，DOM元素也會隨之變化

上下文

所有被循環(huán)的元素，都擁有自己的上下文，請看如下代碼：

{ 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)

}

在被循環(huán)的元素內(nèi)部，想訪問數(shù)組子對象的屬性，可以直接訪問，如：{title}

如果想訪問父元素的屬性，就需要加上parent，比如：{ parent.remove }，因為上下文不一致了

在 parent.remove方法中，可以使用event.item對象訪問當前數(shù)組元素的屬性，

parent.remove方法執(zhí)行完之后，會執(zhí)行父組件的update事件；

當在一個父組件實例執(zhí)行this.update()的時候 ，該父組件下的所有子組件都會更新，

自定義的循環(huán)標簽

一個自定義的標簽也可以被標記為循環(huán)標簽，如下：

你可以通過data="{ this }"把當前標簽的實例傳遞給todo-item的實例

簡單數(shù)組循環(huán)

循環(huán)的數(shù)組元素不一定是對象，如下：

{ i }: { name }

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

對象屬性循環(huán)

與簡單數(shù)組循環(huán)相對，下面的代碼是對象屬性循環(huán)

{ name } = { value }

this.obj = {

key1: 'value1',

key2: 1110.8900,

key3: Math.random()

}

注意，對象屬性循環(huán)有性能問題，不推薦使用；

riotjs是通過JSON.stringify來判斷對象是否有變更，以此來決定是否要更新HTML元素

key屬性

你可以在循環(huán)標簽的時候，使用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 } }

]

虛擬標簽

有的時候，你需要循環(huán)多個標簽，但是你又不想在這多個標簽上面套一個wrapper，

這個時候你就可以用虛擬標簽，代碼如下：

{item.key}

{item.value}

你可以在虛擬標簽上添加if 或者 data-is屬性

Show me with no wrapper on condition

HTML元素標簽

你可以把HTML元素當作riot標簽使用，但只能在body內(nèi)這么用，如下：

riot.mount('my-list')

當你碰到這種情況的時候，你需要使用data-is屬性

foo

bar

本系列寫完了，祝好！

總結(jié)

以上是生活随笔為你收集整理的js循环解析html标签,riot.js教程【六】循环、HTML元素标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。