Magix模板语法

[xinglie]

<div>
    {{each list as user}}
        {{if user.isVIP}}
            <span>VIP</span>
       {{else}}
            <span>Join VIP</span>
       {{/if}}
       {{if !user.address}}
            <div>Input address</div>
       {{/if}}
        <div>{{=user.name}}</div>
        <input value="{{:user.age}}"/>
    {{/each}}
</div>
<mx-dropdown *list="{{#dropdownList}}"/>
<div mx-html="{{=richHTML}}"></div>

<div mx-safe-html="{{=safeHTML}}"></div>

输出

{{= expr }}

安全转义输出

如当 expr 为 long text <a> content </a> 字符串时，实际渲染为

long text <a> content </a<

在浏览器环境中渲染转义的内容后，最终显示的结果是 long text <a> content </a>

如果需要输出带 HTML 的内容，请参考 mx-html

布尔或有值属性

当标签属性需要根据布尔或有值输出渲染时使用

<input disabled="{{=readonly}}?"/>
<div data-ext="{{=extend}}??"></div>

当 readonly 为 true 时 添加 disabled 属性，否则删除 disabled
当 extend 不为 null 和 undefined 是添加 data-ext 属性，否则删除

当 ? 或 ?? 后有内容时，将根据 ? 或?? 前面的表达式来决定是否添加属性，如果添加属性，属性的值为 ? 或?? 后面的内容

<input data-readonly="{{=readonly}}?ext{{=def}}"/>
<div data-ext="{{=extend}}??ext value"></div>

以上述 input 为例，当 readonly 为 false 时，表示删除 data-readonly 属性。当readonly 为 true 时，表示添加 data-readonly 且 属性的内容(值)为 ext{{=def}}

data-ext 同理，处理逻辑取决于 extend 的值不为 null 和 undefined，输出data-ext属性，值为 ext value

mx-html 和 mx-safe-html

输出 html 内容

<div mx-html="{{=html}}"></div>

使用 mx-html 时，表示这个html 是一个危险的 HTML 字符串，会调用配置中的 _mxSanitize 方法进行安全过滤，影响一定的性能
使用 mx-safe-html 时，表示这个html 是一个安全的 HTML 字符串，将直接渲染，性能更好。

如当 html 是 这是<b>加粗</b>文本 的内容时，将会把 加粗 二字粗体显示

<div mx-html="{{=html}}??"><b>inner</b><i>content</i></div>

当 html 有 ?? 修饰时，如果 html 是 null 或 undefined 时，将输出 div下子节点的内容，否则则是 html的内容

mx-html 不支持 ? 修饰符，如果使用编译器会直接报错

控制

if

可条件控制节点或某个属性内部的输出

{{if cond}}
    <div class="card hover-shadow{{if pointerDown}} pointer-down{{/if}}"></div>
{{/if}}

each

循环输出列表

<div>
    {{each list as user $index $addr by desc}}
        {{$addr = user.province + user.city}}
        <div>{{=$index}} . {{=user.name}}-{{=$addr}}</div>
    {{/each}}
</div>

内置变量

$index 循环下标
$first 是否为第一个
$last 是否为最后一个
$total 总数

保留变量
$value
$key
$count

其它 $ 开头的变量则是自定义变量

支持解构和变量的赋值

<div>
    {{each list as {province,city,name,badges} userIndex = $index by desc}}
        <div>{{=userIndex}} . {{=name}}-{{=province+city}}</div>
        {{each badges as b $index}}
           <span>{{=userIndex}}.{{=$index}} => {{=b.name}}</span>
        {{/each}}
    {{/each}}
</div>

通过 by asc 和 by desc 控制循环方向，默认 by asc

forin

循环输出对象

<div>
    {{forin object as $key $value}}
        <div>{{=$key}} . {{=$value}}</div>
    {{/forin}}
</div>

for

通用for循环，以支持更加复杂的情况

<div>
    {{for(let a of list)}}
        <span>{{=a.age}}</span>
    {{/for}}
</div>

相比于 each 和 forin，for 更贴近于原生 js 语法，更灵活。
但是在其它特性的支持上，比如 双向绑定 就无法支持，因此 for 为备选方案，优先使用 each 和 forin

组件

内置标签

<mx-vframe> 用于渲染任意的 magix view
<mx-link> 用于渲染 a 标签
<mx-tag> 在渲染不同标签的节点

组件库

通过配置编译工具的 galleries 配置项后，可把项目当中的任意一个目录作为组件库，直接使用如
<mx-button>的语法来使用组件，来减少<mx-vframe>标签使用时，相对路径的输入

编译组件

可以通过编译工具的 galleries 配置项中的 xMap 配置编译组件
比如我们项目中有一段经常反复使用的 html 片断，比如卡片，我们可以抽象成编译组件，如 <x-card> 来减少对应 html 在开发中的使用