小程序 - 數據綁定和渲染

來自微信小程序開發文檔 ：原文地址

筆記原地址: 小程序 - 數據綁定和渲染

數據綁定

---

WXML 中的動態數據均來自對應的 Page 的 data。

簡單綁定

---

綁定數據使用 Mustache 語法(雙大括號) 將變量包起。

Page({
    data: {
        id: 0,
        message: 'Hello MINA!',
        condition: true,
        name:"Jerry"
    }
})

1. 用在內容

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

2. 用在屬性

組件屬性(需要在雙引號之內)

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

3. 控制屬性(判斷屬性)

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

4. 關鍵字

關鍵字(需要在雙引號之內)

true：boolean 類型的 true，代表真值。

false： boolean 類型的 false，代表假值。

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

特別注意：不要直接寫 checked=”false”，其計算結果是一個字符串，轉成 boolean 類型後代表真值。

運算

---

可以在 {{}} 內進行簡單的運算，支持的有如下幾種方式：

1. 三元運算符

<view hidden="{{flag ? true : false}}"> Hidden </view>

2. 算數運算

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

Page({
    data: 
    {
        a: 1,
        b: 2,
        c: 3
    }
})

view中的內容爲 3 + 3 + d。

3. 邏輯判斷

<view wx:if="{{length > 5}}">真</view>
<view wx:else">假</view>

4. 字符串運算符

<view>{{"hello" + name}}</view>

5. 數據路徑運算

<view>{{object.key}} {{array[0]}}</view>

Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

組合

---

也可以在 Mustache 內直接進行組合，構成新的對象或者數組。

1. 數組

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

Page({
    data: {
        zero: 0
    }
})

最終組合成數組 [0, 1, 2, 3, 4]。

2. 對象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

Page({
  data: {
    a: 1,
    b: 2
  }
})

最終組合成的對象是 {for: 1, bar: 2}

也可以用擴展運算符 ... 來將一個對象展開

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

...obj1 展開形成 a: 1, b: 2,...obj2 展開形成 c: 3, d:4 加上 e: 5 最終組合成新的對象 {a: 1, b: 2, c: 3, d: 4, e: 5} 。

也可以直接獲取對象

<template is="objectCombine" data="{{foo, bar}}"></template>

Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

注意：上述方式可以隨意組合，但是如有存在變量名相同的情況，後邊的會覆蓋前面。

列表渲染

---

wx:for

---

在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重複渲染該組件。

默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定數組當前元素的變量名，

使用 wx:for-index 可以指定數組當前下標的變量名：

例如：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:for 也可以嵌套，下邊是一個九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>`

block wx:for

---

類似 block wx:if，也可以將 wx:for 用在標籤上，以渲染一個包含多節點的結構塊。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

wx:key

---

如果列表中項目的位置會動態改變或者有新的項目添加到列表中，並且希望列表中的項目保持自己的特徵和狀態（如 <input/> 中的輸入內容，<switch/> 的選中狀態），需要使用 wx:key 來指定列表中項目的唯一的標識符。

1. 字符串，代表在 for 循環的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變。
2. 保留關鍵字 *this 代表在 for 循環中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數字，如：

當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，並且提高列表渲染時的效率。

如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。

示例代碼:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

注意：

當 wx:for 的值爲字符串時，會將字符串解析成字符串數組

<view wx:for="array">
  {{item}}
</view>

等同於

<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

條件渲染

---

wx:if

在框架中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：

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

也可以用 wx:elif 和 wx:else 來添加一個 else 塊：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if

因爲 wx:if 是一個控制屬性，需要將它添加到一個標籤上。如果要一次性判斷多個組件標籤，可以使用一個 <block/> 標籤將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意： <block/> 並不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

wx:if vs hidden

因爲 wx:if 之中的模板也可能包含數據綁定，所有當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因爲它會確保條件塊在切換時銷燬或重新渲染。

同時 wx:if 也是惰性的，如果在初始渲染條件爲 false，框架什麼也不做，在條件第一次變成真的時候纔開始局部渲染。

相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。