模板

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

定义模板

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

代码示例

  • SWAN
  1. <!-- template-demo.swan-->
  2. <template name="person-card">
  3.     <view>
  4.         <text>位置: {{pos}}</text>
  5.         <text>姓名: {{name}}</text>
  6.     </view>
  7. </template>

注意：模板之间可嵌套。

使用模板

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

代码示例

  • SWAN
  • JS
  1. <!-- template-demo.swan-->
  2. <template is="person-card" data="{{{...person}}}" />
  1. // template-demo.js
  2. Page({
  3.     data: {
  4.         person: {
  5.             name: 'Lebron James',
  6.             pos: 'SF', age: 33
  7.         }
  8.     }
  9. });

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

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  1. <!-- template-demo.swan-->
  2. <template name="odd">
  3.    <view> odd </view>
  4. </template>
  7. <template name="even">
  8.    <view> even </view>
  9. </template>
  12. <block s-for="{{[1, 2, 3, 4, 5]}}">
  13.    <view>{{item}}</view>
  14.    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
  15. </block>