百度智能小程序 模板

SWAN 提供模板 template 的用法，旨在提高工程化和代碼可維護(hù)性，可以在模板中定義代碼片段，并被外界注入值，然后在合適的時(shí)機(jī)調(diào)用。

定義模板

name 屬性，定義了模板的名字。<template>內(nèi)定義代碼片段，如：

代碼示例

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

注意:

• 模板之間不可嵌套。

使用模板

通過 is 屬性，聲明需要使用的模板，data 是所需要傳入到模板的值，注意對(duì)象字面量的使用方法，對(duì)象字面量是三個(gè)大括號(hào)包裹。

代碼示例

<!-- template-demo.swan-->
<template is="person-card" data="{{{...person}}}" />

// template-demo.js
Page({
    data: {
        person: {
            name: 'Lebron James',
            pos: 'SF', age: 33
        }
    }
});

is 可以動(dòng)態(tài)決定具體需要渲染哪個(gè)模板。

代碼示例 

<!-- template-demo.swan-->
<template name="odd">
   <view> odd </view>
</template>


<template name="even">
   <view> even </view>
</template>


<block s-for="{{[1, 2, 3, 4, 5]}}">
   <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>