跳到主要内容
模板语法
信息

CabinX使用一种基于普通网页开发流程，采用HTML + CSS + JavaScript的组合， 在CabinX研发体系中为了达到研发流程极简的效果，采用DML + JavaScript组合， 其中DML（Dmall Markup Language）充当HTML角色。 通过不懈努力我们制定了一套强大的UI规约，最终让开发者不写CSS便能完成页面开发。

文本插值​

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

<component>Message: {{ msg }}</>
警告

在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用动态HTML，并且永远不要使用用户提供的 HTML 内容。

Attribute 绑定​

双大括号也能在 attributes 中使用。

<component id="{{dynamicId}}">

</component>
<component id="vip-{{dynamicId}}">

</component>

布尔型 Attribute​

<x-button disabled="{{true}}">Button</x-button>
<x-button disabled="{{false}}">Button</x-button>

使用 JavaScript 表达式​

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div id="`list-{{id}}`"></div>

调用函数​

<component title="{{toTitleDate(date)}}">
  {{ formatDate(date) }}
</component>
提示

绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。

事件响应​

在DML通过 bind + 事件名

<component bind-click="myClickHandle"></component>

内置指令​

通过dm-开头，目前支持的有：

  • dm-show

基于表达式值的真假性，来改变元素的可见性。为假时，页面不会展示，但是模块会构建。

  • dm-if

基于表达式值的真假性，来条件性地渲染元素或者模板片段。如果初始条件是假，那么其内部的内容都不会被渲染。

  • dm-else

表示 dm-if链式调用的“else块”。

  • dm-for

基于原始数据多次渲染元素或模板块。