layui中模板的使用

动态模板

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>

layui中模板的使用相关推荐

layui中的数据表格-自定义模板
layui中的数据表格-自定义模板<script>layui.use('table', function () {var table = layui.table;//第一个实例table. ...
layui使用模板渲染数据
1.定义容器(用于填充渲染后的script) <div id="view" style="display: none;"></div> ...
19、angular1之pass-word组件、input-select组件、only-select组件（两种）、on-off组件、layui中的datetime示例、京东购物车、两种作用域绑定、
19.angular1之pass-word组件.input-select组件 .only-select组件(两种).on-off组件.layui中的datetime示例.京东购物车.两种作用域绑定.两 ...
button layui 点击事件_解决layui中的form表单与button的点击事件冲突问题
解决layui中的form表单与button的点击事件冲突问题 layui的form表单位置和button标签的位置重合,会使得button的click事件得不到响应,如图: 蓝色底为form的位置, ...
layui中的动态表格
layui中的动态表格介绍 layui提供了丰富的动态表格的操作,它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求.支持固定表头.固定行.固定列左/列右,支持拖拽改变列 ...
Layui中的数据表格渲染
学习前端代码的朋友们应该都有所闻layui这个框架,这是一款遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用的前端 UI 框架.如果有需要可以通过官网下载得到,使用起来也极其方便 ...
layui 自定义排序_浅谈layui中table的sort排序
table模块是layui框架最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作,本文介绍了layui中table的sort排序,解决了在我们使用sort排序时可能遇到的一些问题. 今天来谈 ...
多个so中模板单例的多次实例化
在Android打包项目时,发现登录功能不能使用了,logcat中也没发现什么问题,最后一行一行log定位到了问题.原来是一个so文件中的构造函数被初始化二次! 这个单例是通过继承模板来实现的(暂时不 ...
关于 underscore 中模板引擎的应用示例
//关于 underscore 中模板引擎的应用示例 <!doctype html> <html> <head> <meta charset="ut ...

layui中模板的使用

动态模板

定义模板

模板基础属性

layui中模板的使用相关推荐

最新文章

热门文章