數(shù)據綁定

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

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

将 pages/wxml/index.wxml 文件的內(nèi)容做(zuò)一(yī)些簡單的修改，如(rú)代碼2-5所示。

代碼清單2-5 數(shù)據綁定示例

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

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

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

如(rú)代碼2-6所示。

代碼清單2-6 數(shù)據綁定示例

// pages/wxml/index.js

Page({

/**

* 頁面的初始數(shù)據

*/

data: {

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

},

})

​

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

WXML 通(tōng)過 {{變量名}} 來綁定 WXML 文件和(hé)對應的 JavaScript 文件中的 data 對象屬性。

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

代碼清單2-7 展示格式

<!--

{

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

}

-->

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

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

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

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

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

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

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

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

代碼清單2-9 綁定的變量大小寫敏感

<!--

{

w: 'w',

W: 'W'

}

-->

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

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

<!-- 輸出

w

W

-->

還需要(yào)注意，沒有被定義的變量的或者是被設置為(wèi) undefined 的變量不會被同步到 wxml 中，如(rú)代碼2-10所示。

代碼清單2-10 undefined值不會被輸出到 wxml 中

<!--

{

var2: undefined,

var3: null,

var4: "var4"

}

-->

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

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

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

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

<!--

輸出：

null

var4

-->

關于數(shù)據綁定的概念在第三章(zhāng)中有更為(wèi)詳細的介紹。