laytpl : 一款非常轻量的JavaScript模板引擎

//假设你得到了这么一段数据

var data = {

  title: '前端圈',

  intro: '一群码js的骚年，幻想改变世界，却被世界改变。',

  list: [{name: '贤心', city: '杭州'},  {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]

};

var tpl = document.getElementById('tpl').innerHTML; //读取模版

//方式一：异步渲染（推荐）

laytpl(tpl).render(data, function(render){

  document.getElementById('view').innerHTML = render;

});

//方式二：同步渲染：

var render = laytpl(tpl).render(data);

document.getElementById('view').innerHTML = render;

模板就可写成如下：

<h3>{{ d.title }}</h3>

<p class="intro">{{ d.intro }}</p>

<ul>

{{# for(var i = 0, len = d.list.length; i < len; i++){ }}

  <li>

    <span>{{ d.list[i].name }}</span>

    <span>所在城市：{{ d.list[i].city }}</span>

  </li>

{{# } }}

</ul>

完整实例：

//第一步：编写模版。你可以使用一个script标签存放模板，如：

<script id="demo" type="text/html">

<h1>{{ d.title }}</h1>

<ul>

{{# for(var i = 0, len = d.list.length; i < len; i++){ }}

  <li>

    <span>姓名：{{ d.list[i].name }}</span>

    <span>城市：{{ d.list[i].city }}</span>

  </li>

{{# } }}

</ul>

</script>

//第二步：建立视图。用于呈现渲染结果。

<div id="view"></div>

//第三步：渲染模版

var data = {

  title: '前端攻城师',

  list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]

};

var gettpl = document.getElementById('demo').innerHTML;

laytpl(gettpl).render(data, function(html){

  document.getElementById('view').innerHTML = html;

});

我实际做的一个实现页面：

<!DOCTYPE html >

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />

<meta content="yes" name="apple-mobile-web-app-capable" />

<meta content="black" name="apple-mobile-web-app-status-bar-style" />

<meta content="telephone=no" name="format-detection" />

<meta content="" name="keywords">

<meta content="" name="description">

<!-- 全局-css -->

<link type="text/css" rel="stylesheet" href="../tools/css/basecore.css"/>

<link type="text/css" rel="stylesheet" href="../tools/css/style.css"/>

<!-- 全局-js -->

<script type='text/javascript' src='../tools/js/common.js'></script>

<script type="text/html" id="_template">

{{# for(var i = , len = d.length; i < len; i++){ }}

    <li>

    <p class="item-time">{{d[i].addDate}}</p>

    <div class="item-title-row">

          <div class="item-title">{{d[i].noticeTitle}}</div>

          <div class="item-after"><a href="javascript:goToDetail('{{d[i].id}}')">进入详情<i class="icon icon-right"></i></a></div>

    </div>

    <div class="item-content">

        <div class="item-media list-img"><p><img class="imgthanh" data-original="../../{{d[i].noticePic}}"/></p></div>

        <div class="item-inner">

              <div class="item-title-row moredo3">

                 {{d[i].noticeContent}}

              </div>

        </div>

    </div>

    </li>

{{# } }}

</script>

<title>重要通知列表</title>

</head>

<body class="bjF8F6F0">

<div class="page-group">

   <div class="page">

    <div class="content" id="contentscroll">

    <header>

       <div class="top-bar-con">

         <div class="tc top-bar-txt">重要信息</div>

       </div>

    </header>

    <!-- header_start-->

    <!-- header_end   -->

    <!-- center_start -->

    <ul class="list-block media-list notice-list" id="noticeList">

    </ul>

    <!-- 没有数据时 -->

    <div class="list_empty" id="emptyDiv" style="display:none;text-align:center">

        <p class="logoimg"><img class="wht4" src="../tools/images/dlogo1.png"/></p>

        <p class="emptycont"><span><font class="tmptytitle">暂无通知消息哦！</font><br></span></p>

    </div>

    <!-- center_end -->

    <div class="list_loading" id="loadAnimate">

         <span class="glyphicon"></span>

    </div>

    </div>

  </div>

</div>

<!-- 请在这底下写js -->

<!-- 全局-js -->

<script type='text/javascript' merge="true" src='../tools/js/core.js'></script>

<script type="text/javascript">

var basePath = getRelativeRootPath();

var pNo = 1;

var pSize = 5;

var loadFlag = true;

var allList = new Array();

$(function(){

    initNotice();

    gotoBot();

});

function initNotice(){

    $.encasedAjax(basePath + '/rest/mall/queryNoticeList/'+pNo+'/'+pSize, {},function (data) {
　　　　if(data.noticeList !=null && data.noticeList.length>0){
　　　　　　  var tpl = document.getElementById('_template').innerHTML; //读取模版

            //方式一：异步渲染（推荐）

            laytpl(tpl).render(data.noticeList, function(render){
　　　　　　　　　$("#noticeList").append(render);　

            });//图片延迟加载

            imgoriginal();

            if(data.noticeList.length == pSize){

                loadFlag = true;

                loadAnimate.innerHTML = '<span>上拉加载更多</span>';

            }else{

                loadFlag = false;

                loadAnimate.innerHTML = '<span>没有更多了</span>';

            }

        }else{

            loadFlag = false;

            if(pNo==1){

                $("#emptyDiv").show();

                $("#noticeList").html("");

                loadAnimate.innerHTML = '<span></span>';

                return;

            }

            loadAnimate.innerHTML = '<span>没有更多了</span>';

        }

    },{"async":true})

}

//分页

function gotoBot(){

    $("#contentscroll").on("scroll", function() {

        var windowHeight = document.getElementById('contentscroll').clientHeight;

        var scrollHeight = document.getElementById('contentscroll').scrollHeight;

        var scrollTop = document.getElementById('contentscroll').scrollTop + document.body.scrollTop;

        if(scrollTop >= (scrollHeight - windowHeight - 100) && loadFlag) {

            pNo++;

            loadFlag = false;

            loadAnimate.innerHTML = '<span class="glyphicon">正在加载中...</span>';

            initNotice(pNo);

        }

    });

}

function goToDetail(id){

    location.href="articleDetails.html?id="+id;

}

</script>

</body>

</html>

参考：http://laytpl.layui.com/

laytpl : 一款非常轻量的JavaScript模板引擎的更多相关文章

Tippy.js – 轻量的 Javascript Tooltip 工具库
工具提示(Tooltip)在网站中的一个小功能,但却有很重要的作用,常用于显示一些温馨的提示信息.如果网站中的工具提示功能做得非常有创意的话能够加深用户对网站印象.Tippy.js 是一款帮助你快速创 ...
2017年最新20个轻量的 JavaScript 库和插件
下面这个列表中的免费 JavaScript 插件都是今年发布的,没有臃肿的一体化的框架,它们提供轻量级的解决方案,帮助 Web 开发过程更容易和更快.提供的插件可以创建滑块.响应式菜单.模态窗口.相册 ...
推荐13款javascript模板引擎
javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...
【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...
JavaScript模板引擎实例应用
在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...
JavaScript模板引擎
JavaScript模板引擎实例应用在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...
JavaScript模板引擎实例应用（转）
本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作演示数据:blog.json结构: { "li ...
JavaScript模板引擎artTemplate.js——为什么使用模板引擎？
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

随机推荐

项目中如何使用babel6详解
由于浏览器的版本和兼容性问题,很多es6,es7的新的方法都不能使用,等到可以使用的时候,可能已经过去了很多年.Babel可以把es6,es7的新代码编译成兼容绝大多数的主流浏览器的代码. 本篇文章主 ...
SpringMVC4+MyBatis+SQL Server2014 基于SqlSession实现读写分离（也可以实现主从分离）
前言上篇文章我觉的使用拦截器虽然方便快捷,但是在使用读串还是写串上你无法控制,我更希望我们像jdbc那样可以手动控制我使用读写串,那么这篇则在sqlsession的基础上实现读写分离, 这种方式则需 ...
Python13_day3
http://www.cnblogs.com/wupeiqi/articles/4950799.html`` 学习流程一.基本的学习方法 1,看视频,听懂老师的课程. 2,下课做笔记,将笔记的内容写 ...
php超时任务处理
首先,不知道fastcgi_finish_request是啥的点这里. 一直知道php有个fastcgi_finish_request可以用来针对web应用处理耗时任务,但我一直以为直接fastcg ...
springcloud(一)：大话Spring Cloud
研究了一段时间spring boot了准备向spirng cloud进发,公司架构和项目也全面拥抱了Spring Cloud.在使用了一段时间后发现Spring Cloud从技术架构上降低了对大型系统 ...
Angular vs React 最全面深入对比
如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角 ...
<JAVA>可变参数列表
这是java1.5版本的新特性,就是当你想定义一个方法,但是不知道以后要用的时候传几个参数进去,这时可以在方法的参数列表中这样写(参数类型... 数组名),然后在方法内部直接用操作数组的方式操作.比如 ...
angularjs jsonp跨域
<script> (function(angular){ "use strict" var app= angular.module('appController',[] ...
mysql获取当前日期的周一和周日的日期
,,date_format(curdate(),)//获取当前日期在本周的周一的日期 ,,date_format(curdate(),)//获取当前日期在本周的周日的日期
JEESZ-Redis分布式缓存安装和使用
独立缓存服务器: Linux CentOS Redis 版本: 3.0下面我们针对于Redis安装做下详细的记录:编译和安装所需的包:# yum install gcc tcl创建安装目录:# mkd ...

laytpl : 一款非常轻量的JavaScript模板引擎

laytpl : 一款非常轻量的JavaScript模板引擎的更多相关文章

随机推荐

热门专题