微信小程序之入門(mén)篇（一）
微信小程序之注冊(cè)篇（二）
微信小程序之開(kāi)發(fā)初體驗(yàn)（三）——開(kāi)發(fā)工具使用和目錄結(jié)構(gòu)
微信小程序之生命周期（四）
微信小程序之?dāng)?shù)據(jù)綁定（五）
微信小程序之觸控事件（六）
微信小程序之基礎(chǔ)組件篇——視圖容器（七）
微信小程序之基礎(chǔ)組件篇——基礎(chǔ)內(nèi)容（八）
微信小程序之基礎(chǔ)組件篇——表單組件（九）
微信小程序之基礎(chǔ)組件篇——導(dǎo)航組件（十）
微信小程序之基礎(chǔ)組件篇——媒體組件（十一）
微信小程序之API篇——豆瓣圖書(shū)搜索（十二）
微信小程序之拓展篇——weui-wxss（十三）

微信小程序是通過(guò)什么方法來(lái)實(shí)現(xiàn)數(shù)據(jù)綁定的呢？答案是狀態(tài)模式-單向數(shù)據(jù)流。
狀態(tài)模式定義一個(gè)對(duì)象，改對(duì)象可以通過(guò)管理其狀態(tài)的變化，從而實(shí)現(xiàn)應(yīng)用程序做出相應(yīng)的變化。

狀態(tài)模式

簡(jiǎn)單的講，對(duì)象狀態(tài)化，只要對(duì)象狀態(tài)發(fā)送變化，就通知頁(yè)面更新視圖元素。 通過(guò)以下三個(gè)步驟實(shí)現(xiàn)：

• 識(shí)別哪個(gè)UI元素被綁定了相應(yīng)的對(duì)象。
• 監(jiān)視對(duì)象狀態(tài)的變化。
• 將所有變化傳播到綁定的視圖上。

注意數(shù)據(jù)流向是單向的，即視圖變化不會(huì)影響對(duì)象狀態(tài)。

index.wxml:
<view> {{ message }} </view>

index.js:
Page({
 data: {
   message: 'Hello MINA!'
 }
})

通過(guò)以上代碼，就可以完成簡(jiǎn)單的數(shù)據(jù)綁定。

以下將展示小程序提供的更加多元化的復(fù)雜的數(shù)據(jù)綁定方式。

index.wxml
 <!--數(shù)據(jù)綁定--內(nèi)容-->
<view>{{message}}</view>

<!--數(shù)據(jù)綁定--組件屬性-->
<view id="item-{{id}}">組件屬性id-{{id}}</view>

<!--數(shù)據(jù)綁定---控制屬性-->
<view wx:if="{{condition}}">控制屬性{{condition}}</view>

<!--數(shù)據(jù)綁定---三元運(yùn)算-->
<view hidden="{{flag ? true : false}}">Hidden--{{flag}}</view>

<!--數(shù)據(jù)綁定---算數(shù)運(yùn)算-->
<view>{{a + b}} + {{c}} + d</view>

<!--數(shù)據(jù)綁定---邏輯判斷-->
<view wx:if="{{length > 5}}">6</view>

<!--數(shù)據(jù)綁定---字符串運(yùn)算-->
<view>{{"Hello  " + name}}</view>

<!--數(shù)據(jù)綁定---數(shù)組組合-->
<view wx:for="{{[zero, 1, 2, 3, 4, 5, 6]}}">{{item}}</view>

<!--數(shù)據(jù)綁定---對(duì)象-->
<!--最終組合成的對(duì)象是{for: 1, bar: 2}-->
<template is="objectCombine" data="{{for: x, bar: y}}"></template>

<!--數(shù)據(jù)綁定---擴(kuò)展運(yùn)算符 ... 來(lái)將一個(gè)對(duì)象展開(kāi)-->
<!--最終組合成的對(duì)象是{a: 1, b: 2, c: 3, d: 4, e: 5}-->
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

<!--數(shù)據(jù)綁定---對(duì)象的 key 和 value 相同-->
<!--最終組合成的對(duì)象是{foo: 'my-foo', bar:'my-bar'}-->
<template is="objectCombine" data="{{foo, bar}}"></template>

index.js
Page({
  data:{
    //內(nèi)容
    message:'Hello MINA!',

    //組件屬性
    id: 0,

    //控制屬性
    condition: true,

    //三元運(yùn)算
    flag:false,

    //算數(shù)運(yùn)算
    a: 1,
    b: 2,
    c: 3,

    //邏輯判斷
    length: 6,

    //字符串運(yùn)算
    name: 'MINA',

    //數(shù)組組合
    zero: 0,

    //對(duì)象
    x: 0,
    y: 1,

    //對(duì)象展開(kāi)
    obj1: {
        a: 1,
        b: 2
    },
    obj2: {
        c: 3,
        d: 4
    },
    e: 5,

    //對(duì)象key和value相同
    foo: 'my-foo',
    bar: 'my-bar'
  },
})

聰明的讀者一定會(huì)發(fā)現(xiàn)，其實(shí)僅僅通過(guò)綁定數(shù)據(jù)實(shí)現(xiàn)視圖的展示是不夠的，一旦用戶操作或者數(shù)據(jù)更新引起數(shù)據(jù)變化，視圖需要同步更新。
所以視圖上的數(shù)據(jù)都必須用過(guò)事件傳遞給對(duì)象，只有用戶操作視圖，才能獲取到數(shù)據(jù)，并更新對(duì)象狀態(tài)。調(diào)用this.setData（）方法實(shí)現(xiàn)視圖的部分渲染。如下圖：

視圖-對(duì)象

• 視圖A由于用戶操作，觸發(fā)事件A 。
• 事件A處理函數(shù)中，更新對(duì)象A和對(duì)象B的狀態(tài)。
• 由于對(duì)象A和B狀態(tài)變化，通知視圖A和B更新。

index.wxml:
<view bindtap="changeText"> {{ message }} </view>

index.js:
Page({
 data: {
   message: 'Hello MINA!'
 },
changeText: function(){
    this.setData({
      message:'changed data'
    })
  }
})