Weex前端语义支持通过两种特殊属性(if和repeat)的设置来确定组件的显示状态,这会使得整个页面布局显得更加灵活。
if
通过设置if
属性值,可以控制当前组件节点的显示状态。如果设为true,则会将当前节点置于DOM中渲染,反之则会从DOM中移除。
<template>
<container>
<text onclick="toggle">Toggle</text>
<image src="..." if="{{shown}}"></image>
</container>
</template>
<script>
module.exports = {
data: {
shown: true
},
methods: {
toggle: function () {
this.shown = !this.shown
}
}
}
</script>
repeat
repeat
属性用于控制具有相同样式或属性的组件节点做重复渲染。它绑定的数据类型必须为数组,其中每个数组项的属性会分别绑定到需要重复渲染的各子组件上。
<template>
<container>
<container repeat="{{list}}" class="{{gender}}">
<image src="{{avatar}}"></image>
<text>{{nickname}}</text>
</container>
</container>
</template>
<style>
.male {...}
.female {...}
</style>
<script>
module.exports = {
data: {
list: [
{gender: 'male', nickname: 'Li Lei', avatar: '...'},
{gender: 'female', nickname: 'Han Meimei', avatar: '...'},
...
]
}
}
</script>
此外,weex同样支持不在repeat数组中的数据绑定到重复渲染的组件节点上。
<template>
<container>
<container repeat="{{list}}" class="{{gender}}">
<image src="{{avatar}}"></image>
<text>{{nickname}} - {{group}}</text>
</container>
</container>
</template>
<style>
.male {...}
.female {...}
</style>
<script>
module.exports = {
data: {
group: '...',
list: [
{gender: 'male', nickname: 'Li Lei', avatar: '...'},
{gender: 'female', nickname: 'Han Meimei', avatar: '...'},
...
]
}
}
</script>
$index
获取当前节点所绑定的数据在repeat数组中的索引值.
例如:
<div repeat="{{list}}">
<text>No. {{$index + 1}}</text>
<div>
例如:
<div repeat="{{v in list}}">
<text>No. {{$index + 1}}, {{v.nickname}}
</text>
</div>```
```html
<div repeat="{{(k, v) in list}}">
<text>No. {{k + 1}}, {{v.nickname}}</text>
</div>
track-by
追踪特殊的属性
通常情况下,当更新repeat数组时,所有数组元素关联的组件节点都会被重新渲染。如果其中部分节点的数据在更新前后未发生变更,那么最好是让这些节点保持原样,仅更新数据有变化的节点,weex提供了track-by属性能帮您轻松搞定。
注意: track-by
属性的设置不支持数据绑定的方式
例如:
<template>
<container>
<container repeat="{{list}}" track-by="nickname" class="{{gender}}">
<image src="{{avatar}}"></image>
<text>{{nickname}} - {{group}}</text>
</container>
</container>
</template>
如前所述,当更新repeat数组时,如果检测到属性nickname的值前后一致,那么它所绑定的子节点将不被重新渲染。
对于if和repeat的使用,可以简化处理,即if="show"和if="{{show}}"所表达的前端语义相同。
<template>
<container>
<text if="shown">Hello</text>
<text if="{{shown}}">Hello</text>
</container>
</template>
<script>
module.exports = {
data: function () {return {shown: true}}
}
</script>
很显然,这两个text文本会被同时显示出来。