• 模板
  • 定义模板
  • 使用模板

模板

SWAN 提供模板 template 的用法，旨在提高工程化和代码可维护性，可以在模板中定义代码片段，并被外界注入值，然后在合适的时机调用。

定义模板

name 属性，定义了模板的名字。<template>内定义代码片段，如：

代码示例

• SWAN

 


  
<!-- template-demo.swan-->

  
<template name="person-card">

  
 <view>

  
 <text>位置: {{pos}}</text>

  
 <text>姓名: {{name}}</text>

  
 </view>

  
</template>

 

注意：模板之间可嵌套。

使用模板

通过 is 属性，声明需要使用的模板，data 是所需要传入到模板的值，注意对象字面量的使用方法，对象字面量是三个大括号包裹。

代码示例

• SWAN
• JS

 


  
<!-- template-demo.swan-->

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

 

 


  
// template-demo.js

  
Page({

  
 data: {

  
 person: {

  
 name: 'Lebron James',

  
 pos: 'SF', age: 33

  
 }

  
 }

  
});

 

is 可以动态决定具体需要渲染哪个模板。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN

 


  
<!-- 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]}}">

  
 <view>{{item}}</view>

  
 <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>

  
</block>