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. 使用docker构建双主mysql

    我们有的时候需要双主mysql, 这样无论哪个数据库出现了问题的话都可以继续使用数据库.把两个数据库挂到一个代理上面,这样哪个服务出问题了,另外一个就可以继续服务了.当然本文不是主要谈代理的,所以这个 ...

  2. 图-搜索-DFS-51. N皇后

    2020-03-15 19:49:59 问题描述: n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n ...

  3. CF 1012C Dp

    Welcome to Innopolis city. Throughout the whole year, Innopolis citizens suffer from everlasting cit ...

  4. 深入理解Java AIO（二）—— AIO源码解析

    深入理解Java AIO(二)—— AIO源码解析 这篇只是个占位符,占个位置,之后再详细写(这个之后可能是永远) 所以这里只简单说一下我看了个大概的实现原理,具体的等我之后更新(可能不会更新了) 当 ...

  5. 【poj 2429】GCD & LCM Inverse (Miller-Rabin素数测试和Pollard_Rho_因数分解)

    本题涉及的算法个人无法完全理解,在此提供两个比较好的参考. 原理 (后来又看了一下,其实这篇文章问题还是有的……有时间再搜集一下资料) 代码实现 #include <algorithm> ...

  6. D 【BJOI2018】求和

    时间限制 : 20000 MS   空间限制 : 565536 KB 评测说明 : 2s,512m 问题描述 master 对树上的求和非常感兴趣.他生成了一棵有根树,并且希望多次询问这棵树上一段路径 ...

  7. 解决VS项目程序运行完就自动关闭窗口

    VS的程序运行完会关闭窗口,需要设置工程属性 笔者虽然是Java开发者,但是学习用到了C++与C语言,之前使用的是dev与codeblock并没有这个情况,那么如何解决 首先你有这个hello,wor ...

  8. 在非主线程里面使用NSTimer创建和取消定时任务

    为什么要在非主线程创建NSTimer 将 timer 添加到主线程的Runloop里面本身会增加线程负荷 如果主线程因为某些原因阻塞卡顿了,timer 定时任务触发的时间精度肯定也会受到影响 有些定时 ...

  9. STM32F103ZET6时钟

    1.STM32F103ZET6时钟说明 STM32F103ZET6的时钟树图如下所示: STM32F103ZET6有很多个时钟源,分别有: HSE:高速外部时钟信号. HSI:高速内部部时钟信号. L ...

  10. Three.js中的动画实现02-[Three.js]-[Object3D属性.onAfterRender/.onBeforeRender]

    Table Of Content Object3D简介以及两个属性的介绍 一个示例 Object3D简介以及两个属性的介绍 这是Three.js中大部分对象的基类,提供了一系列的属性和方法来对三维空间 ...