百度智能小程序 數(shù)據(jù)綁定

SWAN 模板中的動(dòng)態(tài)數(shù)據(jù)，都從邏輯層 Page 中 data 對(duì)象來(lái)。

基礎(chǔ)數(shù)據(jù)綁定

數(shù)據(jù)綁定和許多模板引擎一樣，數(shù)據(jù)包裹在雙大括號(hào)里面。雙向綁定的數(shù)據(jù)需包裹在{= =}中。

例如：組件 scroll-view 中，scroll-top 和 scroll-left 的使用方法分別為：

• scroll-top="{= scrollTop =}"
• scroll-left="{= scrollLeft =}"

渲染內(nèi)容

代碼示例

<!-- data-demo.swan -->
<view>
    Hello My {{ name }}
</view>

<!-- 被渲染成: Hello My SWAN App -->

// data-demo.js
Page({
    data: {
        name: 'SWAN App'
    }
});

屬性綁定

代碼示例

<!-- attr-demo.swan -->
<view class="c-{{className}}">屬性綁定</view>

// attr-demo.js
Page({
    data: {
        className: 'blue'
    }
});

控制屬性

注: 屬性不需要被雙大括號(hào)包裹

代碼示例

<!-- condition-demo.swan -->
<view s-if="flag">如果為flag為true，你看得到我。</view>

// condition-demo.js
Page({
    data: {
        flag: true
    }
});

運(yùn)算

SWAN 模板 提供了豐富的表達(dá)式類型支持，讓使用者在編寫視圖模板時(shí)更方便。

• 數(shù)據(jù)訪問(wèn)(普通變量、屬性訪問(wèn))
• 一元否定
• 二元運(yùn)算
• 二元關(guān)系
• 三元條件
• 括號(hào)
• 字符串
• 數(shù)值
• 布爾

通過(guò)下面例子列舉支持的表達(dá)式類型。

<!-- operation-demo.swan -->

<!-- 普通變量 -->
<text>{{name}}</text>

<!-- 屬性訪問(wèn) -->
<text>{{person.name}}</text>
<text>{{persons[1]}}</text>

<!-- 一元否定 -->
<text>{{!isOK}}</text>
<text>{{!!isOK}}</text>

<!-- 二元運(yùn)算 -->
<text>{{num1 + num2}}</text>
<text>{{num1 - num2}}</text>
<text>{{num1 * num2}}</text>
<text>{{num1 / num2}}</text>
<text>{{num1 + num2 * num3}}</text>

<!-- 二元關(guān)系 -->
<text>{{num1 > num2}}</text>
<text>{{num1 !== num2}}</text>

<!-- 三元條件 -->
<text>{{num1 > num2 ? num1 : num2}}</text>

<!-- 括號(hào) -->
<text>{{a * (b + c)}}</text>

<!-- 數(shù)值 -->
<text>{{num1 + 200}}</text>

<!-- 字符串 + 三元條件 -->
<text>{{item ? ',' + item : ''}}</text>

<!-- 三元運(yùn)算 -->
<checkbox checked="{{flag ? true : false}}"></checkbox>

<!-- 數(shù)組字面量 -->
<text>{{ ['john', 'tony', 'lbj'] }}</text>

對(duì)象字面量(對(duì)象字面量是三個(gè)大括號(hào)包裹)

注: 對(duì)象字面量支持了在模板里重組對(duì)象以及使用擴(kuò)展運(yùn)算符 ... 來(lái)展開(kāi)對(duì)象。

代碼示例

<!-- template-demo.swan-->
<template name="tag-card">
    <view>
        <text>標(biāo)簽: {{tag}}</text>
        <text>昵稱: {{nickname}}</text>
    </view>
</template>

<template name="person-card">
    <view>
        <text>位置: {{pos}}</text>
        <text>姓名: {{name}}</text>
    </view>
</template>

<template name="team-card">
    <view s-for="item, index in teams">
        <text>球隊(duì): {{index}} - {{item}}</text>
    </view>
</template>

<template name="age-card">
    <view>
        <text>年齡: {{age}}</text>
    </view>
</template>

<template is="person-card" data="{{person}}" />
<!-- 對(duì)象字面量 -->
<template is="team-card" data="{{ {teams} }}" />
<template is="tag-card" data="{{ {tag, nickname: 'king'} }}" />
<template is="age-card" data="{{ {...person} }}" />

// template-demo.js
Page({
    data: {
        person: {name: 'Lebron James', pos: 'SF', age: 33},
        teams: ['Cleveland Cavaliers', 'Miami Heat', 'Los Angeles Lakers'],
        tag: 'basketball'
    }
});