layui下載地址:
最終效果:
模板引擎文檔 手冊地址:
https://www.layui.com/doc/modules/laytpl.html
與一般的字符拼接不同的是，laytpl 的模板可與數據分離，集中把邏輯處理放在 View 層，提升代碼可維護性，尤其是針對大量模板渲染的情況。
也可以將模板存儲在頁或其它任意位置：
以下是代碼思路:
- 將代碼存到script標簽里.
- 在script渲染數據.
- 插入指定的view標簽里.
form.render();注意:a.form表單需要放在class="layui-form"類里,b.動態渲染的表單,需要用更新渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>非模塊化方式使用layui</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代碼 -->
<!-- 第二步：建立視圖。用於呈現渲染結果。 -->
<div id="view"></div>
<div id="view2"></div>
</body>
<!-- //第一步：編寫模版。你可以使用一個script標簽存放模板，如： -->
<script id="demo" type="text/html">
<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>
</script>
<script id="demo2" type="text/html">
<form class="layui-form"> <!-- 提示：如果你不想用form，你可以換成div等任何一個普通元素 -->
<div class="layui-form-item">
<label class="layui-form-label">復選框</label>
<div class="layui-input-block">
<!-- <input type="checkbox" name="like[write]" title="寫作">
<input type="checkbox" name="like[read]" title="閱讀"> -->
{{# layui.each(d.answers_list, function(index, item){ }}
<input type="checkbox" value="{{ item.id }}" name="answers[{{ item.answers }}]" title="{{ item.answers }}">
<!-- <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>{{ item.answers }}</span><i class="layui-icon layui-icon-ok"></i></div> -->
{{# }) }}
<hr>
{{# layui.each(d.answers_list, function(index, item){ }}
<input type="checkbox" value="{{ item.id }}" name="{{ item.answers }}" title="{{ item.answers }}" data-option_id="{{ item.id }}" lay-skin="primary">
<!-- <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>{{ item.answers }}111</span><i class="layui-icon layui-icon-ok"></i></div> -->
{{# }) }}
</div>
</div>
</form>
</script>
<script src="./layui/layui.all.js"></script>
<script>
//由於模塊都一次性加載，因此不用執行 layui.use() 來加載對應模塊，直接使用即可：
;!function(){
var layer = layui.layer
,form = layui.form,
laytpl = layui.laytpl;
layer.msg('Hello World');
//第三步：渲染模版
var data = { //數據
"title":"Layui常用模塊"
,"list":[
{"modname":"彈層","alias":"layer","site":"layer.layui.com"},
{"modname":"表單","alias":"form"}
]
,"answers_list":[
{"id":"1","answers":"A"},
{"id":"2","answers":"B"},
{"id":"3","answers":"D"},
{"id":"4","answers":"E"}
]
}
//dome1
var getTpl = demo.innerHTML
,view = document.getElementById('view');
laytpl(getTpl).render(data, function(html){
view.innerHTML = html;
});
//dome2
var demo2html = demo2.innerHTML
,view2 = document.getElementById('view2');
laytpl(demo2html).render(data, function(html){
view2.innerHTML = html;
});
form.render(); //更新全部
}();
</script>
</html>