文档翻译 - 数据绑定 （Data-Binding）

[sospartan]

新版中文网站及文档已经上线，请访问 https://weex-project.io/cn/ ， 此处后续不再维护，谢谢理解。

数据绑定

0.4

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

绑定数据path

<template>
  <container>
    <text style="font-size: {{size}}">{{title}}</text>
  </container>
</template>

<script>
  module.exports = {
    data: {
      size: 48,
      title: 'Alibaba Weex Team'
    }
  }
</script>

上面的代码会把title和size的数值绑定到模板内容上.

我们也可以通过.符号来绑定数据结构中的字段. 看一下下面的代码片段:

<template>
  <container>
    <text style="font-size: {{title.size}}">{{title.value}}</text>
  </container>
</template>

<script>
  module.exports = {
    data: {
      title: {
        size: 48,
        value: 'Alibaba Weex Team'
      }
    }
  }
</script>

In-template 表达式

进行数据绑定时, Weex支持一些简单的javascript表达式,例如:

<template>
  <container style="flex-direction: row;">
    <text>{{firstName + ' ' + lastName}}</text>
  </container>
</template>

<script>
  module.exports = {
    data: {
      firstName: 'John',
      lastName: 'Smith'
    }
  }
</script>

这些表达式会在当前的上下文中进行演算.

NOTE: 每个绑定只能包含单个表达式

Computed Properties

0.5

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

例如:

<template>
  <container style="flex-direction: row;">
    <text>{{fullName}}</text>
    <text onclick="changeName"></text>
  </container>
</template>

<script>
  module.exports = {
    data: {
      firstName: 'John',
      lastName: 'Smith'
    },
    computed: {
      fullName: {
        get: function() {
          return this.firstName + ' ' + this.lastName
        },

        set: function(v) {
          var s = v.split(' ')
          this.firstName = s[0]
          this.lastName = s[1]
        }
      }
    },
    methods: {
      changeName: function() {
        this.fullName = 'Terry King'
      }
    }
  }
</script>

我们在这段代码里定义了一个computed property fullName. 它所提供的函数能作为gettter函数实现连接字符串firstName和lastName.

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

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

数据绑定中的特殊属性

样式: style 或 class

组件的样式能够通过style属性进行绑定:

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

样式也能够通过class属性实现绑定,多个classname通过空格分隔:

<template>
  <container>
    <text class="{{size}}"></text>
    <text class="title {{status}}"></text>
  </container>
</template>

在上面的代码中如果{{size}} 和 {{status}} 是空值, 就只有class="title" 会被渲染.

• 查看更多关于style和class的内容

事件处理器: on...

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

<template>
  <text onclick="toggle">Toggle</text>
</template>

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

if & repeat

if 属性能够通过true/false值控制组建是否显示.

<template>
  <container style="flex-direction: column;">
    <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>

Weex通过repeat属性来生成列表.

NOTE: 当你修改 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 = []

• 查看更多关于逻辑控制的内容

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 属性设计的目的是为了降低长列表、纯静态页面的内存开销。小心的使用它，因为它可能会中断你的页面逻辑。

下一篇： style和class.

[transtone]

这么好用的v-bind和v-on居然全给改了。5555555555555

上一篇：Weex快速上手教程
下一篇：style和class

[sospartan]

@transtone 你可以去主项目发起issue让大家来讨论 如果支持的人多 我觉得开发同学会考虑的 😄

[Luoxinfang]

我现在用的vue.js 准备切到weex 有什么建议吗

[samyzh]

@Luoxinfang ，会vue.js上手快。我花了三天看下vue文档，现在看weex感觉很轻松,会点原生那就跟nice啦😄

[lxc7923]

小白请教下为什么更新了数据绑定的组件却没有更新呢？是有更改这块吗？

[Jinjiang]

这么好用的v-bind和v-on居然全给改了。5555555555555

这两个语法印象中是 vue 0.13 / 0.14 提出来的，已经接近 1.0 了，我们的语法相对是一个老版本的 vue，其实不是我们要刻意”改“掉，后期我们做了一些调查，大家对 {{...}} 的接受度更高，所以我们暂没有冒然升级到最新版的 vue 语法 @transtone

[Jinjiang]

@lxc7923 可以来我们的中文聊天室具体说一下你遇到的问题 https://gitter.im/weexteam/cn

[FF-Zack]

image标签好像不加宽高就不能显示的是么？

[iceyao]

@FF-Zack image 不加宽高不显示，查看 weex-html5 版就会发现最终转换成了 div 的 background-image 的形式来展示一张图片

[hisland]

原来是基于 vue 0.13 / 0.14 , 那 vue2.0 不知如何

[sospartan]

@hisland WIP

[hisland]

@sospartan that's cool, https://twitter.com/youyuxi/status/766753137717829633

[liuguangli]

有没有网格布局呀（grid），如果有如何绑定列表？

[codercuixin]

试了一下，好像
data: {
size: 48,
title: 'Alibaba Weex Team'
}
和
data: {
title: {
size: 48,
value: 'Alibaba Weex Team'
}
}
两种数据绑定方式不能混用

[Jam1zhu]

script标签内改变了data里的数据，template不是时时更新的吗？

[happybobo]

查看更多关于style和class的内容 的 链接 https://github.com/weexteam/article/issues/style-n-class.md 都不能点。。。文档能不能用点心

[WLDragon]

感觉能和vue一致就好了，现在从vue切换过来感觉会混乱

[yundongbot]

@Jam1zhu 是实时更新的。

[Jam1zhu]

多谢。当时做倒计时碰到点麻烦，已经解决了。^_^ 发自网易邮箱大师 在2016年11月29日 18:52，Yun Dong 写道: @Jam1zhu 是实时更新的。 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[yundongbot]

@Luoxinfang 看看新版文档呗。http://alibaba.github.io/weex/cn/doc/

[yundongbot]

@lxc7923
看看是否有报错，可以参考下新文档中的各种例子 http://alibaba.github.io/weex/cn/doc/syntax/data-binding.html

[yundongbot]

@FF-Zack
image 必须明确指定 宽高，否则无法显示

http://alibaba.github.io/weex/cn/doc/components/image.html

[yundongbot]

@liuguangli
可以使用 flex 实现网格布局，可参考新文档中的示例 http://alibaba.github.io/weex/cn/doc/references/common-style.html#示例

在线预览 http://dotwe.org/ee6a898fcac2242308c24fe5882c52ac

[yundongbot]

新版中文网站及文档已经上线，请访问 https://weex-project.io/cn/ ， 此处后续不再维护，谢谢理解。