laytpl 模板加载模板(姑且这么理解来说吧! )

分享 未结 2 1221
jsksls
jsksls VIP4 2017-12-7
悬赏:20飞吻
需求场景:
前后端分离单页应用
需要从静态服务器加载一个页面. 这个页面加载时需要渲染初始数据.但是同时该页面上操作也会用到laytpl模板.
这时候目标模板也渲染两次.
第一次渲染初始化的一些数据显示.
第二次操作页面.使用加载过来的未渲染模板!
比如加载下来一个表格.表格内格式用laytpl. 表格页面搜索初始化一些数据内容.就需要在第一次加载时填充!
翻了下源码:

嗯, 发现把{{! !}} 都去掉了. 所以写成这样的-> {{! {{d.hiddenText}} !}}
demo代码如下:
demo.html
<!DOCTYPE html>
<html>
<head>
<title>理解laytpl模板,单页应用需求</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="static/layui/css/layui.css" type="text/css"></link>
<script type="text/javascript" src="static/layui/layui.js"></script>
<script type="text/javascript" src="static/layui/lay/modules/jquery.js"></script>
</head>
<body>
<div id="demo"></div>
<input value="二次解析" onclick="test()" type="button" />
<script type="text/javascript">
var laytpl;
layui.use([ 'laytpl' ], function() {
laytpl = layui.laytpl;
$.get("tmp.html", function(data) {
laytpl(data).render({
text : "测试显示文字"
}, function(html) {
$("#demo").html(html);
});
});

});
function test() {
// 这里测试判断一下 tplstr元素是否存在吧, 点击第二次没有这个元素.当然实际应用不是这样!
var getTpl = $("#tplstr").html();
laytpl(getTpl).render({
hiddenText : "二次解析数据"
}, function(html) {
$("#demo").html(html);
});
}
</script>
</body>
</html>
tmp.html[模板文件]
<div>{{ d.text }}</div>

<script id="tplstr" type="text/html">
{{! {{d.hiddenText}} !}}

</script>
学识有限, 目前我想到的是这个办法.有点奇怪! 有更好的办法欢迎留言指正一下!
回帖
本帖已设置禁止回复