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

模板

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>