数据绑定

SWAN 模板中的动态数据，都从逻辑层 Page 中 data 对象来。

基础数据绑定

数据绑定和许多模板引擎一样，数据包裹在双大括号里面。双向绑定的数据需包裹在{= =}中。

例如：组件 scroll-view 中，scroll-top 和 scroll-left的使用方法分别为：

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

渲染内容

代码示例

  1. <!-- data-demo.swan -->
  2. <view>
  3.     Hello My {{ name }}
  4. </view>
  6. <!-- 被渲染成: Hello My SWAN App -->
  1. // data-demo.js
  2. Page({
  3.     data: {
  4.         name: 'SWAN App'
  5.     }
  6. });

属性绑定

代码示例

  1. <!-- attr-demo.swan -->
  2. <view class="c-{{className}}">属性绑定</view>
  1. // attr-demo.js
  2. Page({
  3.     data: {
  4.         className: 'blue'
  5.     }
  6. });

控制属性

注: 属性不需要被双大括号包裹

代码示例

  1. <!-- condition-demo.swan -->
  2. <view s-if="flag">如果为flag为true，你看得到我。</view>
  1. // condition-demo.js
  2. Page({
  3.     data: {
  4.         flag: true
  5.     }
  6. });

运算

SWAN 模板 提供了丰富的表达式类型支持，让使用者在编写视图模板时更方便。

  • 数据访问(普通变量、属性访问)
  • 一元否定
  • 二元运算
  • 二元关系
  • 三元条件
  • 括号
  • 字符串
  • 数值
  • 布尔

通过下面例子列举支持的表达式类型。

  1. <!-- operation-demo.swan -->
  3. <!-- 普通变量 -->
  4. <text>{{name}}</text>
  6. <!-- 属性访问 -->
  7. <text>{{person.name}}</text>
  8. <text>{{persons[1]}}</text>
  10. <!-- 一元否定 -->
  11. <text>{{!isOK}}</text>
  12. <text>{{!!isOK}}</text>
  14. <!-- 二元运算 -->
  15. <text>{{num1 + num2}}</text>
  16. <text>{{num1 - num2}}</text>
  17. <text>{{num1 * num2}}</text>
  18. <text>{{num1 / num2}}</text>
  19. <text>{{num1 + num2 * num3}}</text>
  21. <!-- 二元关系 -->
  22. <text>{{num1 > num2}}</text>
  23. <text>{{num1 !== num2}}</text>
  25. <!-- 三元条件 -->
  26. <text>{{num1 > num2 ? num1 : num2}}</text>
  28. <!-- 括号 -->
  29. <text>{{a * (b + c)}}</text>
  31. <!-- 数值 -->
  32. <text>{{num1 + 200}}</text>
  34. <!-- 字符串 + 三元条件 -->
  35. <text>{{item ? ',' + item : ''}}</text>
  37. <!-- 三元运算 -->
  38. <checkbox checked="{{flag ? true : false}}"></checkbox>
  40. <!-- 数组字面量 -->
  41. <text>{{ ['john', 'tony', 'lbj'] }}</text>

对象字面量(对象字面量是三个大括号包裹)

注: 对象字面量支持了在模板里重组对象以及使用扩展运算符 … 来展开对象。

代码示例

<!-- template-demo.swan-->
<template name="tag-card">
    <view>
        <text>标签: {{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>球队: {{index}} - {{item}}</text>
    </view>
</template>

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

<template is="person-card" data="{{person}}" />
<!-- 对象字面量 -->
<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'
    }
});