显示逻辑控制器 #12

Open
boboning opened this Issue Jun 14, 2016 · 12 comments

Projects

None yet

9 participants

@boboning

显示逻辑控制器

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>

repeat属性扩展

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

例如:

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

获取repeat数组的属性值.

例如:

    <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文本会被同时显示出来。

@cheng1xin

如果有多个属性都不变,track-by该怎样写?track-by="nickname group" 还是其他

@jincdream

@chengxinxin6 通过另外一个属性值进行track 这两个值吧?

@lanria990
lanria990 commented Aug 11, 2016 edited
<template>
  <container>
 <container repeat="{{v in list}}">
         <text>No. {{$index + 1}}, {{v.nickname}}</text>
      </container>
  </container>

</template>
<script>
  module.exports = {
    data: {
      list: [
        {gender: 'male', nickname: 'Li Lei', avatar: 'http://gtms01.alicdn.com/tps/i1/TB1wRLhLVXXXXapXXXXvUs8_FXX-344-390.png'},
        {gender: 'female', nickname: 'Han Meimei', avatar: 'http://t.cn/RGE3AJt'},
      ],

    }
  }
</script>

根据文档,例子运行时报错。错误信息:ERR! ModuleBuildError: Module build failed:
环境配置:win7,weex:v0.4.5,node:v6.2.0,

@Jinjiang
Contributor

@lanria990 有可能是 Node v6 兼容性不够好,方便试一下 v5 或 v4 吗?方便我们更定位问题:)
更具体的问题也可以移步我们的中文聊天室, https://gitter.im/weexteam/cn 那里交流使用疑问更方便快捷
谢谢

@lanria990
lanria990 commented Aug 12, 2016 edited

@Jinjiang 谢谢,已找到问题,在container之间多了一个回车

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

  </container>

</template>
@Jinjiang Jinjiang closed this Aug 12, 2016
@shbIOS
shbIOS commented Aug 26, 2016 edited

子控件里面嵌套style绑定,不支持么?如下代码,图片出不来,

<template>
    <container>
      <container repeat="{{list}}" class="{{gender}}">
        <image class="{{thumb}}" src="http://t.cn/RGE3uo9"></image>
        <text>{{nickName}}</text>
      </container>

   </container>
</template>

<style>
   .thumb {width:20;height:20;background-color:red;}
   .male {width:200;height:200;color:grey;background-color:lightgrey;}
   .female {width:300;height:300;}

</style>

<script>
   module.exports = {
      data:{
          list:[
              {gender:'male',nickName:'Li Lei Mei'},
              {gender:'female',nickName:'Han Meimei'},
              {gender:'female',nickName:'Han Meimei'}
          ]
      }
   }
</script>

直接将样式写在 <image> 标签内,图片就可以出来。

@Jinjiang Jinjiang reopened this Aug 28, 2016
@yuanzx
yuanzx commented Nov 20, 2016

如何 repeat 原始类型构成的array,例如 [1,2,3,4]

@Jinjiang
Contributor

@yuanzx <text repeat="num in list">num</text>

@jiyinyiyong

repeat 部分有个代码标记错了.

@Jinjiang
Contributor
Jinjiang commented Dec 2, 2016

多谢指正,文档正在换新的,应该马上就搞定了

@DoranYun
DoranYun commented Dec 9, 2016

@cheng1xin
目前只支持一个属性。另外 track-by 会被当成 key 值的,只能是字符串或者数字,对象会被转成 [object Object] track-by 失效

@DoranYun
DoranYun commented Dec 9, 2016

@shbIOS
style 支持 数据绑定,不过你的代码有问题,你没有在 data 里定义 thumb

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment