layuiAdmin 的视图是一个“动静结合”的载体,除了常规的静态模板,你当然还可以在视图中存放动态模板,因此它可谓是焦点中的焦点。
### 定义模板
在视图文件中,通过下述规则定义模板:
<script type="text/html" template>
<!-- 动态模板碎片 -->
</script>
下面是一个简单的例子:
<script type="text/html" template>
当前 layuiAdmin 的版本是:{{ layui.admin.v }}
路由地址:{{ layui.router().href }}
</script>
在不对动态模板设定数据接口地址的情况下,它能读取到全局对象。但更多时候,一个动态模板应该是对应一个接口地址,如下所示:
<script type="text/html" template lay-url="接口地址">
我叫:{{ d.data.username }}
{{# if(d.data.sex === '男'){ }}
公的
{{# } else { }}
母的
{{# } }}
</script>
模板中的 d 对应的是你接口返回的 json 转化后的一维对象,如:
{
"code": 0
,"data": {
"username": "贤心"
,"sex": "男"
}
}
那么,上述动态模板最终输出的结果就是:
我叫:贤心
公的
### 模板基础属性
动态模板支持以下基础属性
- lay-url
用于绑定模板的数据接口地址,支持动态模板解析,如:
<script type="text/html" template lay-url="https://api.xxx.com?id={{ layui.router().search.id }}">
<!-- 动态模板碎片 -->
</script>
- lay-type
用于设定模板的接口请求类型(默认:get),如:
<script type="text/html" template lay-url="接口地址" lay-type="post">
<!-- 动态模板碎片 -->
</script>
- lay-data
用于定义接口请求的参数,其值是一个 JavaScript object 对象,同样支持动态模板解析,如:
<script type="text/html" template lay-url="接口地址" lay-data="{id: '{{ layui.router().search.id }}', type: 1}">
<!-- 动态模板碎片 -->
</script>
- lay-headers
用户定义接口请求的 Request Headers 参数,用法与 lay-data 的完全类似,支持动态模板解析。
- lay-done
接口请求完毕并完成视图渲染的回调脚本,里面支持写任意的 JavaScript 语句。事实上它是一个封闭的函数作用域,通过给 Function 实例返回的函数传递一个参数 d,用于得到接口返回的数据:
<script type="text/html" template lay-url="接口地址" lay-done="console.log(d);">
<!-- 动态模板碎片 -->
</script>
很多时候,你在动态模板中可能会放入一些类似于 layui 的 form 元素,而有些控件需要执行 form.render() 才会显示,这时,你可以对 lay-done 赋值一个全局函数,如:
<script type="text/html" template lay-url="接口地址" lay-done="layui.data.done(d);">
<div class="layui-form" lay-filter="LAY-filter-demo-form">
<input type="checkbox" title="复选框">
</div>
</script>
<!-- 注意:别看眼花了,下面可不是动态模板,而是 JS 脚本区域 -->
<script>
layui.data.done = function(d){
layui.use(['form'], function(){
var form = layui.form;
form.render(null, 'LAY-filter-demo-form'); //渲染该模板下的动态表单
});
};
</script>
TIPS:
1、如果模板渲染完毕需要处理过多的交互,我们强烈推荐你采用上述的方式定义一个全局函数赋值给 lay-done,会极大地减少维护成本。
2、无需担心该全局函数的冲突问题,该函数是一次性的。其它页面即便声明了一个同样的函数,也只是用于新的视图,丝毫不会对之前的视图造成任何影响。
3、layui.data.done 中的 done 可以随意命名,但需与 lay-done 的赋值对应上。
### 模板语法
动态模板基于 layui 的 laytpl 模块,详细语法可见:
http://www.layui.com/doc/modules/laytpl.html#syntax