layuiadmin(官方)知识点
动态模板
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>
如果模板渲染完毕需要处理过多的交互，我们强烈推荐你采用上述的方式定义一个全局函数赋值给 lay-done，会极大地减少维护成本。
无需担心该全局函数的冲突问题，该函数是一次性的。其它页面即便声明了一个同样的函数，也只是用于新的视图，丝毫不会对之前的视图造成任何影响。
layui.data.done 中的 done 可以随意命名，但需与 lay-done 的赋值对应上。
view 模块
view(id)
获取指定容器，并返回一些视图渲染的方法，如：
//渲染视图，viewPath 即为视图路径
view('id').render(viewPath).then(function(){
//视图文件请求完毕，视图内容渲染前的回调
}).done(function(){
//视图文件请求完毕和内容渲染完毕的回调
});
//直接向容器插入 html，tpl 为 模板字符；data 是传入的数据。该方法会自动完成动态模板解析
view('id').send(tpl, data);
另外，render 方法支持动态传参，以用于视图内容接受。如：
admin.popup({
id: 'LAY-popup-test1'
,success: function(){
view(this.id).render('视图文件所在路径', {
id: 123 //这里的 id 值你可以在一些事件中动态获取（如 table 模块的编辑）
});
}
});
那么，在视图文件中，你可以在动态模板中通过 {{ d.params.xxx }} 得到传入的参数，如：
<script type="text/html" template lay-url="http://api.com?id={{ d.params.id }}">
配置了接口的动态模板，且接口动态获取了 render 传入的参数：{{ d.params.id }}
</script>
<script type="text/html" template>
也可以直接获取：<input type="hidden" name="id" value="{{ d.params.id }}">
</script>
而如果是在 JS 语句中去获取模板传递过来的变量，可以借助动态模板的 lay-done 属性去实现，如：
<script type="text/html" template lay-done="layui.data.sendParams(d.params)">
</script>
然后在 JS 语句中通过执行动态模板 lay-done 中对应的方法得到对应的参数值：
<script>
//定义一个 lay-done 对应的全局方法，以供动态模板执行
layui.data.sendParams = function(params){
console.log(params.id) //得到传递过来的 id 参数（或其他参数）值
//通过得到的参数值，做一些你想做的事
//…
//若需用到 layui 组件，layui.use 需写在该全局方法里面，如：
layui.use(['table'], function(){
var table = layui.table;
table.render({
elem: ''
,url: 'url?id='+ params.id
});
});
};
</script>
视图中加载 JS 模块
在视图文件中，除了写 HTML，也可以写 JavaScript 代码。如：
<div id=“LAY-demo-hello”>Hello layuiAdmin</div>
<script>
layui.use('admin', function(){
var $ = layui.jquery;
admin.popup({
content: $('#LAY-demo-hello').html()
});
});
</script>
如果该视图对应的 JS 代码量太大，我们更推荐你在 controller 目录下新增一个业务模块，并在视图中直接 layui.use 去加载该模块。下面以控制台主页 index.html 为例：
<div>html区域<div>
<script>
//加载 controller 目录下的对应模块
/*
小贴士：
这里 console 模块对应 的 console.js 并不会重复加载，
然而该页面的视图可能会重新插入到容器，那如何保证脚本能重新控制视图呢？有两种方式：
1): 借助 layui.factory 方法获取 console 模块的工厂（回调函数）给 layui.use
2): 直接在 layui.use 方法的回调中书写业务代码，即:
layui.use('console', function(){
//同 console.js 中的 layui.define 回调中的代码
});
这里我们采用的是方式1。其它很多视图中采用的其实都是方式2，因为更简单些，也减少了一个请求数。
*/
layui.use('console', layui.factory('console'));
</script>
当视图被渲染后，layui.factory 返回的函数也会被执行，从而保证在不重复加载 JS 模块文件的前提下，保证脚本能重复执行。
————————————————
版权声明：本文为CSDN博主「liuyalu_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liuyalu_/article/details/106146304
