KSML 语法

更新时间：2023-02-09 15:34:02

是快手小程序框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

KSML 能力：

数据绑定

KSML 中的动态数据绑定来自对应 js 中的 data。

<!-- ksml -->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello ks!'
  }
}

列表渲染

使用 ks:for 绑定一个数组，可实现由数组数据来重复渲染该组件。
数组当前项默认为item，当前项下标默认为index。

<!--ksml-->
<view ks:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

使用 ks:for-item 可以指定数组当前元素的变量名。

使用 ks:for-index 可以指定数组当前下标的变量名。

条件渲染

使用ks:if=""来判断是否需要渲染该代码块。

也可以使用ks:elif和ks:else 来添加一个 else 块:

<!--ksml-->
<view ks:if="{{pc}}"> pc </view>
<view ks:elif="{{mobile}}"> mobile </view>
<view ks:else="{{pad}}"> pad </view>

// page.js
Page({
  data: {
    pc: false,
    mobile: true,
    pad: false
  }
})

模板

可以在模板中定义代码片段，然后在不同的地方调用。

使用 name 作为模板的名字。然后在 \<template/>内定义代码片段。

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。

<!--ksml-->
<template name="templateName">
  <view>
    {{ name }}{{ age }}
  </view>
</template>

<template is="templateName" data="{{...templateData}}"/>

// page.js
Page({
    data: {
        templateData: {
            name: 'name',
            age: '22'
        }
    }
})

引用

KSML 提供两种文件引用方式 import 和 include。

import

import 可以在该文件中使用目标文件定义的 template。

<template name="item">
  <text>{{message}}</text>
</template>

在 index.ksml 中引用了 item.ksml，就可以使用 item 模板：

<import src="item.ksml"/>
<template is="item" data="{{message: 'forbar'}}"/>

include

include 可以将目标文件除了 \<template/> 外的整个代码引入，相当于是拷贝到 include 位置，如：

<!-- index.ksml -->
<include src="header.ksml"/>
<view> body </view>
<include src="footer.ksml"/>
<!-- header.ksml -->
<view> header </view>
<!-- footer.ksml -->
<view> footer </view>