您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)如何使用layui模板引擎,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
快速使用
與一般的字符拼接不同的是,laytpl 的模板可與數(shù)據(jù)分離,集中把邏輯處理放在 View 層,提升代碼可維護(hù)性,尤其是針對(duì)大量模板渲染的情況。
layui.use('laytpl', function(){ var laytpl = layui.laytpl;//直接解析字符 laytpl('{{ d.name }}是一位公猿').render({ name: '賢心' }, function(string){ console.log(string); //賢心是一位公猿 }); //你也可以采用下述同步寫法,將 render 方法的回調(diào)函數(shù)剔除,可直接返回渲染好的字符 var string = laytpl('{{ d.name }}是一位公猿').render({ name: '賢心' }); console.log(string); //賢心是一位公猿 //如果模板較大,你也可以采用數(shù)據(jù)的寫法,這樣會(huì)比較直觀一些 laytpl([ '{{ d.name }}是一位公猿', '其它字符 {{ d.content }} 其它字符' ].join('')) });
你也可以將模板存儲(chǔ)在頁面或其它任意位置:
//第一步:編寫模版。你可以使用一個(gè)script標(biāo)簽存放模板,如:<script id="demo" type="text/html"> <h4>{{ d.title }}</h4> <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){ }}無數(shù)據(jù){{# } }}</ul></script>//第二步:建立視圖。用于呈現(xiàn)渲染結(jié)果。<div id="view"></div>//第三步:渲染模版var data = { //數(shù)據(jù)"title":"Layui常用模塊","list":[{"modname":"彈層","alias":"layer","site":"layer.layui.com"},{"modname":"表單","alias":"form"}]}var getTpl = demo.innerHTML,view = document.getElementById('view');laytpl(getTpl).render(data, function(html){view.innerHTML = html;});
模板語法
語法說明示例{{ d.field }}輸出一個(gè)普通字段,不轉(zhuǎn)義html
<div>{{ d.content }}</div>
{{= d.field }}輸出一個(gè)普通字段,并轉(zhuǎn)義html
<h3>{{= d.title }}</h3>
{{# JavaScript表達(dá)式 }}JS 語句。一般用于邏輯處理。用分隔符加 # 號(hào)開頭。注意:如果你是想輸出一個(gè)函數(shù),正確的寫法是:{{ fn() }},而不是:{{# fn() }}
{{#var fn = function(){return '2017-08-18';};}}{{# if(true){ }}開始日期:{{ fn() }}{{# } else { }}已截止{{# } }}
{{! template !}}對(duì)一段指定的模板區(qū)域進(jìn)行過濾,即不解析該區(qū)域的模板。注:layui 2.1.6 新增
<div> {{! 這里面的模板不會(huì)被解析 !}}</div>
分割符
如果模版默認(rèn)的 {{ }} 分隔符與你的其它模板(一般是服務(wù)端模板)存在沖突,你也可以重新定義分隔符:
laytpl.config({ open: '<%', close: '%>'});//分割符將必須采用上述定義的laytpl([ '<%# var type = "公"; %>' //JS 表達(dá)式, '<% d.name %>是一位<% type %>猿。' ].join('')).render({ name: '賢心'}, function(string){ console.log(string); //賢心是一位公猿});
關(guān)于如何使用layui模板引擎就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。