数据绑定

数据绑定使用Mustache（双大括号）将变量包起来，如下：

<view>{{ message }}</view>

而变量message在对应*.js文件中Page对象中进行设置，如下：

Page({

data: {

message: 'Hello Fancye'

}

})

我们再之前建立的工程下面新建目录demo/bindDataView及其对应文件，用于此次演示：

在index.js文件中编辑内容如下：

var helloData = {name: '老白'}

Page({

data:{

name: helloData.name

},

changeName: function() {

this.setData({name: 'Applet'})

}

})

我们定义了一个helloData变量，并将它的值赋值给Page对象的data变量。页面中所有的动态数据都可以在data 中进行获取。

在index.wxml中编辑内容如下，双大括号中的name值会动态的从page.data.name中获取到：

<view class="container"> Hello {{name}}! </view>

保存代码之后，可以在左边的视图中看到效果：

我们再在index.wxml中添加一个按钮用于动态改变name的值：

<view class="container"> Hello {{name}}! </view>

<button type="primary" bindtap="changeName"> Click me! </button>

在按钮组件属性中，有一个bindtap属性，它是一个事件处理函数，它绑定的参数changeName指向Page中提前配置好的一个Function，点击这个按钮则会触发changeName这个函数，事件在后面文章中将会介绍。

changeName函数定义了一行代码

this.setData({name: 'Applet'})

它的作用是动态改变Page.data的值，this就是Page的引用。

让我们看一下点击按钮前后，name的变化：

点击按钮之前

点击按钮之后

点击按钮之前name的值为“老白”，点击按钮之后，通过setData方法，将name值更改为Applet。

这种数据绑定的方式也可以用于其他方式：

组件属性：

<view id="item-{{ id }}"></view>

条件表达式：

<view wx:if="{{ condition }}"></view>

关键字：

<checkbox checked="{{ false }}"></checkbox>

运算符

<view>{{ a + b }} - c</view>

逻辑运算：

<view>{{ length > 5}}</view>