显示逻辑控制器

0.4

Weex前端语义支持通过两种特殊属性（if和repeat）的设置来确定组件的显示状态，这会使得整个页面布局显得更加灵活。

注意: 在<template>内，显示逻辑语句不能应用到根元素, 请不要在上面直接使用 if or 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>

repeat属性扩展

使用 $index 获取当前节点所绑定的数据在repeat数组中的索引值.

0.5

例如：

<div repeat="{{list}}">
  <text>No. {{$index + 1}}</text>
<div>

获取repeat数组的属性值.

0.5

例如：

<div repeat="{{v in list}}">
  <text>No. {{$index + 1}}, {{v.nickname}}</text>
</div>

<div repeat="{{(k, v) in list}}">
  <text>No. {{k + 1}}, {{v.nickname}}</text>
</div>

使用track-by 追踪特殊的属性

0.5

通常情况下，当更新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}}"所表达的前端语义相同。更多请看mustache。

<template>
  <container>
    <text if="shown">Hello</text>
    <text if="{{shown}}">Hello</text>
  </container>
</template>

<script>
  module.exports = {
    data: function () {return {shown: true}}
  }
</script>

很显然，这两个text文本会被同时显示出来。

下一篇： 渲染逻辑控制器