🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
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