動態模板

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>

lay-headers
用戶定義接口請求的 Request Headers 參數，用法與 lay-data 的完全類似，支持動態模板解析。

lay-done

接口請求完畢并完成視圖渲染的回調腳本，里面支持寫任意的 JavaScript 語句。事實上它是一個封閉的函數作用域，通過給 Function 實例返回的函數傳遞一個參數 d，用于得到接口返回的數據：

<script type="text/html" template lay-url="接口地址" lay-done="console.log(d);"><!-- 動態模板碎片 --> </script>

很多時候，你在動態模板中可能會放入一些類似于 layui 的 form 元素，而有些控件需要執行 form.render() 才會顯示，這時，你可以對 lay-done 賦值一個全局函數，如：

<script type="text/html" template lay-url="接口地址" lay-done="layui.data.done(d);"><div class="layui-form" lay-filter="LAY-filter-demo-form"><input type="checkbox" title="復選框"></div> </script><!-- 注意：別看眼花了，下面可不是動態模板，而是 JS 腳本區域 --> <script> layui.data.done = function(d){layui.use(['form'], function(){var form = layui.form;form.render(null, 'LAY-filter-demo-form'); //渲染該模板下的動態表單}); }; </script>

如果模板渲染完畢需要處理過多的交互，我們強烈推薦你采用上述的方式定義一個全局函數賦值給 lay-done，會極大地減少維護成本。
無需擔心該全局函數的沖突問題，該函數是一次性的。其它頁面即便聲明了一個同樣的函數，也只是用于新的視圖，絲毫不會對之前的視圖造成任何影響。
layui.data.done 中的 done 可以隨意命名，但需與 lay-done 的賦值對應上。

view 模塊

view(id)
獲取指定容器，并返回一些視圖渲染的方法，如：

//渲染視圖，viewPath 即為視圖路徑 view('id').render(viewPath).then(function(){//視圖文件請求完畢，視圖內容渲染前的回調 }).done(function(){//視圖文件請求完畢和內容渲染完畢的回調 }); //直接向容器插入 html，tpl 為 模板字符；data 是傳入的數據。該方法會自動完成動態模板解析 view('id').send(tpl, data);

另外，render 方法支持動態傳參，以用于視圖內容接受。如：

admin.popup({id: 'LAY-popup-test1',success: function(){view(this.id).render('視圖文件所在路徑', {id: 123 //這里的 id 值你可以在一些事件中動態獲取（如 table 模塊的編輯）});} });

那么，在視圖文件中，你可以在動態模板中通過 {{ d.params.xxx }} 得到傳入的參數，如：

<script type="text/html" template lay-url="http://api.com?id={{ d.params.id }}">配置了接口的動態模板，且接口動態獲取了 render 傳入的參數：{{ d.params.id }} </script><script type="text/html" template>也可以直接獲取：<input type="hidden" name="id" value="{{ d.params.id }}"> </script>

而如果是在 JS 語句中去獲取模板傳遞過來的變量，可以借助動態模板的 lay-done 屬性去實現，如：

<script type="text/html" template lay-done="layui.data.sendParams(d.params)"></script>

然后在 JS 語句中通過執行動態模板 lay-done 中對應的方法得到對應的參數值：

<script> //定義一個 lay-done 對應的全局方法，以供動態模板執行 layui.data.sendParams = function(params){console.log(params.id) //得到傳遞過來的 id 參數（或其他參數）值//通過得到的參數值，做一些你想做的事//…//若需用到 layui 組件，layui.use 需寫在該全局方法里面，如：layui.use(['table'], function(){var table = layui.table;table.render({elem: '',url: 'url?id='+ params.id});}); }; </script>

視圖中加載 JS 模塊

在視圖文件中，除了寫 HTML，也可以寫 JavaScript 代碼。如：

<div id=“LAY-demo-hello”>Hello layuiAdmin</div> <script> layui.use('admin', function(){var $ = layui.jquery;admin.popup({content: $('#LAY-demo-hello').html()}); }); </script>

如果該視圖對應的 JS 代碼量太大，我們更推薦你在 controller 目錄下新增一個業務模塊，并在視圖中直接 layui.use 去加載該模塊。下面以控制臺主頁 index.html 為例：

<div>html區域<div><script> //加載 controller 目錄下的對應模塊 /*小貼士：這里 console 模塊對應 的 console.js 并不會重復加載，然而該頁面的視圖可能會重新插入到容器，那如何保證腳本能重新控制視圖呢？有兩種方式：1): 借助 layui.factory 方法獲取 console 模塊的工廠（回調函數）給 layui.use2): 直接在 layui.use 方法的回調中書寫業務代碼，即:layui.use('console', function(){ //同 console.js 中的 layui.define 回調中的代碼 });這里我們采用的是方式1。其它很多視圖中采用的其實都是方式2，因為更簡單些，也減少了一個請求數。*/ layui.use('console', layui.factory('console')); </script>

當視圖被渲染后，layui.factory 返回的函數也會被執行，從而保證在不重復加載 JS 模塊文件的前提下，保證腳本能重復執行。

總結

以上是生活随笔為你收集整理的layuiadmin（官方）知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。