數據綁定

用(yòng)戶界面呈現(xiàn)會(huì)因爲當前時(shí)刻數據不同而有所不同，或者是因爲用(yòng)戶的操作(zuò)發生動态改變，這(zhè)就要求程序的運行過程中，要有動态的去改變渲染界面的能(néng)力。在 Web 開(kāi)發中，開(kāi)發者使用(yòng) JavaScript 通過Dom 接口來(lái)完成界面的實時(shí)更新。在小(xiǎo)程序中，使用(yòng) WXML 語言所提供的數據綁定功能(néng)，來(lái)完成此項功能(néng)。

先看(kàn)一個簡單的例子。

将 pages/wxml/index.wxml 文(wén)件的内容做一些(xiē)簡單的修改，如代碼2-5所示。

代碼清單2-5 數據綁定示例

<!--pages/wxml/index.wxml-->

<text>當前時(shí)間：{{time}}</text>

​保存後工(gōng)具刷新，模拟器并沒有顯示出當前的時(shí)間，這(zhè)是因爲我們并沒有給 time 設置任何初始值，請(qǐng)打開(kāi) pages/wxml/index.js 文(wén)件，在 data 的大(dà)括号中加入：time: (new Date()).toString()。

如代碼2-6所示。

代碼清單2-6 數據綁定示例

// pages/wxml/index.js

Page({

/**

* 頁面的初始數據

*/

data: {

time: (new Date()).toString()

},

})

​

保存，模拟器刷新後正确的展示了(le)當前時(shí)間，并且每次編譯時(shí)間都會(huì)被更新。

WXML 通過 {{變量名}} 來(lái)綁定 WXML 文(wén)件和(hé)對(duì)應的 JavaScript 文(wén)件中的 data 對(duì)象屬性。

後文(wén)中爲了(le)保持簡單，通過以下(xià)格式來(lái)展示上(shàng)述的代碼邏輯，使用(yòng)第一段注釋來(lái)表明(míng) WXML 對(duì)應的腳本文(wén)件中的 data 結構。

代碼清單2-7 展示格式

<!--

{

time: (new Date()).toString()

}

-->

<text>當前時(shí)間：{{time}}</text>

屬性值也(yě)可以動态的去改變，有所不同的是，屬性值必須被包裹在雙引号中，如下(xià)：

代碼清單2-8 屬性值的綁定

<!-- 正确的寫法 -->

<text data-test="{{test}}"> hello world</text>

<!-- 錯誤的寫法 -->

<text data-test={{test}}> hello world </text >

需要注意的是變量名是大(dà)小(xiǎo)寫敏感的，也(yě)就是說 {{name}} 和(hé) {{Name}} 是兩個不同的變量。

代碼清單2-9 綁定的變量大(dà)小(xiǎo)寫敏感

<!--

{

w: 'w',

W: 'W'

}

-->

<view>{{w}}</view>

<view>{{W}}</view>

<!-- 輸出

w

W

-->

還需要注意，沒有被定義的變量的或者是被設置爲 undefined 的變量不會(huì)被同步到(dào) wxml 中，如代碼2-10所示。

代碼清單2-10 undefined值不會(huì)被輸出到(dào) wxml 中

<!--

{

var2: undefined,

var3: null,

var4: "var4"

}

-->

<view>{{var1}}</view>

<view>{{var2}}</view>

<view>{{var3}}</view>

<view>{{var4}}</view>

<!--

輸出：

null

var4

-->

關于數據綁定的概念在第三章中有更爲詳細的介紹。