layui中模板的使用

动态模板

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>