layui下载地址:

https://www.layui.com/

最终效果:

模板引擎文档 手册地址:

https://www.layui.com/doc/modules/laytpl.html

与一般的字符拼接不同的是,laytpl 的模板可与数据分离,集中把逻辑处理放在 View 层,提升代码可维护性,尤其是针对大量模板渲染的情况。

也可以将模板存储在页或其它任意位置:

以下是代码思路:

  1. 将代码存到script标签里.
  2. 在script渲染数据.
  3. 插入指定的view标签里.
  4. 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>

layui.laytpl 模板引擎用法的更多相关文章

  1. js模板引擎用法

    JavaScript模板引擎Template.js使用详解 作者:A_山水子农 字体:[增加 减小] 类型:转载 时间:2016-12-15我要评论 这篇文章主要为大家详细介绍了JavaScript模 ...

  2. Thymeleaf 模板引擎用法

    学习.改良.极致 博客园 首页 新随笔 联系 管理 订阅 随笔- 31  文章- 0  评论- 50  Thymeleaf 常用属性   文章主目录 th:action th:each th:fiel ...

  3. jquery.tmpl.js 模板引擎用法

    1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...

  4. 模板引擎文档 - layui.laytpl 介绍

    <!DOCTYPE html> <html class="ui-page-login"> <head> <meta charset=&qu ...

  5. 前端模板引擎doT.js的用法

    简介 一款简单好用的前端模板引擎 用法 <script type="text/javascript" src="js/doT.min.js">< ...

  6. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  7. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

  8. JavaScript模板引擎实例应用(转)

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

  9. laytpl js模板引擎

    laytpl js模板引擎.laytpl是一款非常轻量的JavaScript模板引擎.地址:http://www.layui.com/laytpl/ 用法与handlebar.js类似,但是比较轻量级 ...

随机推荐

  1. 使用Jenkins与Docker持续集成与发布NetCore项目(实操篇)

    使用Jenkins与Docker持续集成与发布NetCore项目(教程一) 原文地址:https://www.cnblogs.com/Jackyye/p/12588182.html 基本环境 该教程的 ...

  2. ICLR 2020 | 抛开卷积,multi-head self-attention能够表达任何卷积操作

    近年来很多研究将nlp中的attention机制融入到视觉的研究中,得到很不错的结果,于是,论文侧重于从理论和实验去验证self-attention可以代替卷积网络独立进行类似卷积的操作,给self- ...

  3. Keras 多层感知机 多类别的 softmax 分类模型代码

    Multilayer Perceptron (MLP) for multi-class softmax classification: from keras.models import Sequent ...

  4. 记录一个不同的流媒体网站实现方法,和用Python爬虫爬它的坑

    今天找到一片电影,想把它下载下来. 先开Networks工具分析一下: 初步分析发现,视频加载时会拉取TS格式的文件,推测这是一个m3u8的索引,记录着几百段TS文件,这样方便快进时加载. 但是实际分 ...

  5. 使用FME对CAD数据进行过滤、中心点替换转为shapefile

    1.首先加载CAD数据,并暴露出需要使用到的相关字段.比如:block_number.fme_geometry.fme_type等字段. (本次的管网设备由于是一个圆圈里面有三个文字因此将fme_ty ...

  6. zookeeper 负载均衡

    1,原理 将启动的服务注册到zookeeper 注册中心上面,采用临时节点,zookeeper 客户端从注册中心上读取服务的信息,之后再本地采用负载均衡算法(取模算法),将请求轮询到每个服务. 同时z ...

  7. Python基础 | pandas中dataframe的整合与形变(merge & reshape)

    目录 行的union pd.concat df.append 列的join pd.concat pd.merge df.join 行列转置 pivot stack & unstack melt ...

  8. 作为 attribute 和 property 的 value 及 Vue.js 的相关处理

    attribute 和 property 是 Web 开发中,比较容易混淆的概念,而对于 value,因其特殊性,更易困惑,本文尝试做一下梳理和例证 attribute 和 property 的概念 ...

  9. linux中的bash

    一.bash的简介 操作系统都是需要通过shell跟内核来交互的,常见的shell有GUI.KDE.sh.csh.bash.tsh.zsh等. 而linux中最常用的shell就是bash. 二.ba ...

  10. PTA数据结构与算法题目集(中文) 7-16

    PTA数据结构与算法题目集(中文)  7-16 7-16 一元多项式求导 (20 分)   设计函数求一元多项式的导数. 输入格式: 以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1000 ...