支付寶小程序框架 AXML·數(shù)據(jù)綁定

AXML 中的動(dòng)態(tài)數(shù)據(jù)與對(duì)應(yīng)的 Page 中 data 內(nèi)容綁定。

簡(jiǎn)單綁定

數(shù)據(jù)綁定使用 Mustache 語(yǔ)法將變量用兩對(duì)大括號(hào)（{{}}）封裝，可以在多種語(yǔ)法場(chǎng)景下使用。

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello alipay!',
  },
});

組件屬性

組件屬性需使用雙引號(hào)（""）封裝。

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0,
  },
});

控制屬性

控制屬性需使用雙引號(hào)（""）封裝。

<view a:if="{{condition}}"> </view>
Page({
  data: {
    condition: true,
  },
});

關(guān)鍵字

關(guān)鍵字需使用雙引號(hào)封裝（""）。

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

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

注意: 不要直接寫(xiě) checked="false"，計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成布爾值類型后代表真值。

運(yùn)算

可用兩對(duì)大括號(hào)（{{}}） 封裝簡(jiǎn)單的運(yùn)算。支持如下幾種方式：

三元運(yùn)算

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

算數(shù)運(yùn)算

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3,
  },
});

頁(yè)面輸出：

3 + 3 + d

邏輯判斷

<view a:if="{{length > 5}}"> </view>

字符串運(yùn)算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'alipay',
  },
});

數(shù)據(jù)路徑運(yùn)算

<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: 'Hello ',
    },
    array: ['alipay'],
  },
});

組合

可在 Mustache 語(yǔ)法內(nèi)直接進(jìn)行組合，構(gòu)成新的對(duì)象或者數(shù)組。

數(shù)組

<view a:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
  data: {
    zero: 0,
  },
});

最終組合成數(shù)組 [0, 1, 2, 3, 4]。

對(duì)象

<template is="objectCombine" data="{{foo: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2,
  },
});

最終組合成的對(duì)象是 {foo: 1, bar: 2}。

也可用解構(gòu)運(yùn)算符 ... 來(lái)將一個(gè)對(duì)象展開(kāi)：

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2,
    },
    obj2: {
      c: 3,
      d: 4,
    },
  },
});

最終組合成的對(duì)象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

如果對(duì)象 key 和 value 相同，也可以間接地表達(dá)：

<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar',
  },
});

最終組合成的對(duì)象是 {foo: 'my-foo', bar:'my-bar'}。

注意：上面的方式可以隨意組合，但是變量名相同時(shí)，后邊的變量會(huì)覆蓋前面的變量，比如：

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2,
    },
    obj2: {
      b: 3,
      c: 4,
    },
    a: 5,
  },
});

最終組合成的對(duì)象是 {a: 5, b: 3, c: 6}。

常見(jiàn)問(wèn)題

Q：跳轉(zhuǎn)頁(yè)面時(shí)，怎么清除 data 數(shù)據(jù)中的數(shù)據(jù)？

A：無(wú)法清除，可以在跳轉(zhuǎn)時(shí)覆蓋之前的 data 值。