mirror of https://github.com/layui/layui
135 lines
3.4 KiB
Markdown
135 lines
3.4 KiB
Markdown
<pre class="layui-code" lay-options="{preview: true, layout: ['preview'], tools: ['full']}">
|
||
<textarea>
|
||
{{!
|
||
<style>
|
||
.laytpl-demo{border: 1px solid #eee;}
|
||
.laytpl-demo:first-child{border-right: none;}
|
||
.laytpl-demo>textarea{position: relative; display: block; width:100%; height: 300px; padding: 11px; border: 0; box-sizing: border-box; resize: none; background-color: #fff; font-family: Courier New; font-size: 13px;}
|
||
.laytpl-demo>div:first-child{height: 32px; line-height: 32px; padding: 6px 11px; border-bottom: 1px solid #eee; background-color: #F8F9FA;}
|
||
</style>
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs6 laytpl-demo">
|
||
<div>模板</div>
|
||
<textarea id="ID-tpl-src">
|
||
<h3>{{= d.title }}</h3>
|
||
<ul>
|
||
{{# layui.each(d.list, function(index, item){ }}
|
||
<li>
|
||
<span>{{= item.modname }}</span>
|
||
<span>{{= item.alias }}：</span>
|
||
<span>{{= item.site || '' }}</span>
|
||
</li>
|
||
{{# }); }}
|
||
|
||
{{# if(d.list.length === 0){ }}
|
||
无数据
|
||
{{# } }}
|
||
</ul>
|
||
</textarea>
|
||
</div>
|
||
|
||
<div class="layui-col-xs6 laytpl-demo">
|
||
<div>数据</div>
|
||
<textarea id="ID-tpl-data">
|
||
{
|
||
"title": "Layui 常用模块",
|
||
"list": [
|
||
{
|
||
"modname": "弹层",
|
||
"alias": "layer",
|
||
"site": "layer.domain.com"
|
||
},
|
||
{
|
||
"modname": "表单",
|
||
"alias": "form"
|
||
},
|
||
{
|
||
"modname": "表格",
|
||
"alias": "table"
|
||
},
|
||
{
|
||
"modname": "日期",
|
||
"alias": "laydate"
|
||
},
|
||
{
|
||
"modname": "上传",
|
||
"alias": "upload"
|
||
}
|
||
]
|
||
}
|
||
</textarea>
|
||
</div>
|
||
<div class="layui-col-xs12 laytpl-demo" style="border-top: none;">
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs6">视图</div>
|
||
<div class="layui-col-xs6" style="text-align: right">
|
||
<span id="ID-tpl-viewtime"></span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-padding-sm" id="ID-tpl-view" style="max-height: 300px; padding: 16px; overflow: auto;">…</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-clear"></div>
|
||
|
||
<!-- import layui -->
|
||
<script>
|
||
layui.use(function(){
|
||
var laytpl = layui.laytpl;
|
||
var util = layui.util;
|
||
var $ = layui.$;
|
||
|
||
// 获取模板和数据
|
||
var get = function(type){
|
||
return {
|
||
template: $('#ID-tpl-src').val(), // 获取模板
|
||
data: function(){ // 获取数据
|
||
try {
|
||
return JSON.parse($('#ID-tpl-data').val());
|
||
} catch(e){
|
||
$('#ID-tpl-view').html(e);
|
||
}
|
||
}()
|
||
};
|
||
};
|
||
|
||
var data = get();
|
||
|
||
// 耗时计算
|
||
var startTime = new Date().getTime(), timer = function(startTime, title){
|
||
var endTime = new Date().getTime();
|
||
$('#ID-tpl-viewtime').html((title || '模板解析耗时：')+ (endTime - startTime) + 'ms');
|
||
};
|
||
|
||
// 渲染模板
|
||
var thisTpl = laytpl(data.template);
|
||
|
||
// 执行渲染
|
||
thisTpl.render(data.data, function(view){
|
||
timer(startTime);
|
||
$('#ID-tpl-view').html(view);
|
||
});
|
||
|
||
// 编辑
|
||
$('.laytpl-demo textarea').on('input propertychange', function(){
|
||
var data = get();
|
||
if(!data.data) return;
|
||
|
||
// 计算模板渲染耗时
|
||
var startTime = new Date().getTime();
|
||
|
||
// 若模板有变化，则重新解析模板；若模板没变，数据有变化，则从模板缓存中直接渲染（效率大增）
|
||
if(this.id === 'ID-tpl-src'){
|
||
thisTpl.parse(data.template, data.data); // 解析模板
|
||
}
|
||
|
||
// 执行渲染
|
||
thisTpl.render(data.data, function(view){
|
||
timer(startTime);
|
||
$('#ID-tpl-view').html(view);
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
!}}
|
||
</textarea>
|
||
</pre> |