Weex 支持通过两种特殊的特性 if 和 repeat 确定组件的显示逻辑,这会使得整个界面的展示逻辑控制更加简单灵活。
通过设置 if 特性值,你可以控制当前组件是否显示。如果值为真,则当前组件会被渲染出来,如果值为假则会被移除。
注意事项:if="condition" 和 if="{{condition}}" 都是可以的,两者等价使用。
注意事项:if 不能用在 的根组件上,否则将无法被 Weex 正常的识别和处理。
repeat 特性用于重复渲染一组相同的组件。它绑定的数据类型必须为数组,数组里的每一项数据可以体现在不同的组件特性、样式、事件绑定等。
注意事项:同样的 repeat="..." 和 repeat="{{...}}" 都是可以的,两者等价使用。
注意事项:if 不能用在 的根组件上,否则将无法被 Weex 正常的识别和处理。
注意事项: 当你修改 repeat 中的数组时,在写法上会受到一定的限制,具体如下:
- 直接通过“角标”修改数组的某个项目 (如 this.items[0] = ...) 是不会触发视图自动更新的。我们在数组的原型上提供了一个额外的方法:this.items.$set(index, item) 来完成相同的事情。
// 和 `this.items[0] = ...` 作用相同,但会自动触发视图更新
this.items.$set(0, { childMsg: 'Changed!'})
- 直接通过修改 length 来改变数组长度 (如 this.items.length = 0) 也是不会触发视图自动更新的。我们推荐您直接赋值一个新的空数组把旧的替换掉。
// 和 `this.items.length = 0` 作用相同,但会自动触发视图更新
this.items = []
在 repeat 特性值中,如果没有指定索引值的形参,则可以通过绑定形参 $index 来展示数组项目的索引值。
通常情况下,当更新 repeat 中绑定的数组时,所有数组项目关联的组件都会被重新渲染。如果其中部分索引值对应的数据未发生变更,那么最好是让这些组件在渲染层保持原样,仅更新数据有变化的节点。Weex 提供了 track-by 特性来辅助判断哪些数组项目发生了改变。
首先 track-by 特性的值必须是在每一条数组项目中都有且值没有重复的一个字段名,用来区分和追踪每一条数据项增删与否或次序变化与否的关键依据。每当数组发生变化之后,新老数组数据会根据 track-by 特性值所代表的字段重新匹配,然后再决定渲染层应该新建或删除一个组件?还是移动一个组件?还是讲组件保持原来的位置。默认的 track-by 的值就是数组的索引值。