weex数据绑定

1、Weex使用语法({{...}})来对<template>中的模板和<script>里的数据进行绑定. 一旦数据和模板绑定了, 数据上的修改会实时的在模板内容中生效.

示例1：（直接把title和size的数值绑定到模板内容）

<template>
 <container>
  <text style="font-size:{{size}}">{{title}}</text>
 </container>
</template>
<script>
 module.exports={
  data:{
   size:55,
   title:"字体大小"
  }
 }
</script>

示例2：（通过.符号来绑定数据结构中的字段）

<template>
  <container>
    <text style="font-size:{{title.size}}">{{title.value}}</text>
  </container>
</template>
<script>
  module.exports = {
    data:{
      title:{
        size:55,
        value:'字体大小'
      }
    }
  }
</script>

 

2、In-template表达式。

     进行数据绑定时, Weex支持一些简单的javascript表达式，这些表达式会在当前的上下文中进行演算（但注意每个绑定只能包含单个表达式）

<template>
 <container style="flex-direction:row;">
  <text>{{name+'先生，来自于' + address}}</text>
 </container>
</template>
<script>
 module.exports = {
  data:{
   name:'张',
   address:'上海市黄浦区'
  }
 }
</script>

 

3、Computed Properties

     in-template表达式相比于简单的操作符很方便. 但如果需要在模板里实现更多的逻辑判断,你可以使用computed property。

<template>
 <container style="flex-direction:row;">
  <text>{{name}}</text>
  <text οnclick="changeName">变更</text>
 </container>
</template>

<script>
 module.exports = {
  data:{
   firName:'张三疯',
   secName:'李四旺'
  },
  computed:{
   name:{
    get:function(){
     return this.firName + ';' + this.secName;
    },
    set:function(v){
     var s = v.split(';');
     this.firName = s[0];
     this.secName = s[1];
    }
   }
  },
  methods:{
   changeName:function(){
    this.name = "王五;刘六";
   }
  }
 }
</script>

 

说明：代码里定义了一个computed property name. 它所提供的函数能作为gettter函数实现连接字符串firName和secName.

除此以外当由点击出发了changeName后, setter函数会被调用,并且this.firName和this.secName会对应的更新.

注意：data 和 methods 不能有重复的字段. 因为在执行的上下文中 -- this, 能同时指向这两者。

 

4、数据绑定中的特殊属性

   （1）样式和类

      示例1：通过style属性绑定

       <template> 

           <text style="font-size: {{size}}; color: {{color}}; ..."> </text>

     </template>  

   示例2：通过class属性绑定（此时，如果{{size}} 和 {{status}} 是空值, 就只有class="title" 会被渲染）

  <template> 

      <container>   

          <text class="{{size}}"></text>   

          <text class="title {{status}}"></text> 

       </container>

  </template>

 

    （2）事件处理器

      以on...开头的就是用于指定事件处理器的属性, 属性名中'on'之后的部分就是事件的类型,  属性的值就是对应进行事件处理的函数名. 不需要添加mustache语法中的大括号或者函数调用时的圆括号 

<template>
  <text οnclick="toggle">Toggle</text>
</template>

<script>
  module.exports = {
    methods: {
      toggle: function () {
        // todo
      }
    }
  }
</script>

 

（3）if & repeat

    if 属性能够通过true/false值控制组件是否显示等，通过repeat属性来生成列表。

示例：

<template>
  <container style="flex-direction: column;">
     <text style="text-align: center;" onclick="toggle">显示or隐藏</text>
     <image class="thumb" src="http://t.cn/RGE3AJt" if="{{shown}}"></image>
  </container>
</template>

<style>
  .thumb { width: 200; height: 200; }
</style>

<script>
  module.exports = {
    data: {
      shown: true
    },
    methods: {
      toggle: function () {
        this.shown = !this.shown
      }
    }
  }
</script>

注意：

    当你修改 data 中的数组时，在写法上会受到一定的限制，具体如下

    直接通过 index 修改数组的某个项目 (如 vm.items[0] = {};) 是不会触发视图自动更新的。我们在数组的原型上提供了一个额外的方法：$set(index, item).

比如：

     // 和 `example1.items[0] = ...` 作用相同，但会自动触发视图更新

      example1.items.$set(0, { childMsg: 'Changed!'})

   直接通过修改 length 来改变数组长度 (如 vm.items.length = 0) 也是不会触发视图自动更新的。我们推荐您直接赋值一个新的空数组把旧的替换掉。

比如：

     // 和 `example2.items.length = 0` 作用相同，但会自动触发视图更新

     example2.items = []

 

（4）static

       static 属性可以取消数据绑定机制，从而数据更新不会再同步到 UI 界面

<template>
  <div static>
    <text>{{ word }}</text>
  </div>
</template>

<script>
  module.exports = {
    ready: function() {
      this.word = 'Data changes'
    },
    data: {
      word: 'Hello, static'
    }
  }
</script>

       如上所示，添加 static 关键字，渲染结果会是 Hello, static，相当于渲染一个静态的节点，ready 函数中对数据 word 的改变不会被监听，从而 text 值不会改变。
   注意：static 属性设计的目的是为了降低长列表、纯静态页面的内存开销。小心的使用它，因为它可能会中断你的页面逻辑。