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,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

随机推荐

解析View的getDrawingCache方法
1． View 的getDrawingCache方法有时候需要将某个view的内容以图片的方式保存下来,感觉就和截图差不多,可以使用View 的getDrawingCache方法,返回一个Bitma ...
Linux(ubuntu)安装MediaWiki
本篇文档所述步骤,作者完全验证过.一切OK. 作者:http://gaoxingf.blog.51cto.com/612518/188132,Younger Liu 本作品采用知识共享署名-非商业性使 ...
ST-3- Installing and Testing IUnit, Hamcrest and Eclemma
一.安装JUnit和Hamcrest 1.首先从办公网上下载JUnit.jar和Hamcrest.jar,并且将其放入所进行的项目的bin目录下,我将其放入了triangle项目的bin目录下. 2. ...
Java核心技术卷I chapter05 继承
2017年4月10日19:41:44 仅仅用于打好基础 1. 在Java中,所有的继承都是公有继承,而没有C++中的私有继承和保护继承! 2.关键字super的使用方法: (1) 子类中想调用父类中的 ...
斗牛app上架应用宝、牛牛手机游戏推广、百人牛牛app应用开发、棋牌游戏上传、手游APP优化
联系QQ:305-710439斗牛app上架应用宝.牛牛手机游戏推广.百人牛牛app应用开发.棋牌游戏上传.手游APP优化 iOS开发iPhone/iPad平台安卓手机软件开发机型覆盖范围超过113 ...
windows下安装mongodb以及node.js连接mongodb
一.MongoDB 下载下载地址 https://www.mongodb.com/download-center#community 选择windows版下载,然后安装. 二.安装完毕后创建数据 ...
超高速指数模糊算法的实现和优化（10000*10000在100ms左右实现）。
今天我们来花点时间再次谈谈一个模糊算法,一个超级简单但是又超级牛逼的算法,无论在效果上还是速度上都可以和Boxblur, stackblur或者是Gaussblur想媲美,效果上,比Boxblur来的 ...
JAVA中事物以及连接池
一.事物什么是事物? 事务,一般是指要做的或所做的事情.在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元.这些单元要么全都成功,要么全都不成功. 做一件事情,这个一件事情中有多个 ...
关于JAVA自带MD5的方法
有空再详细解释 import java.security.MessageDigest; public class MD5 { public final static String MD51(Strin ...
SmartCoder每日站立会议02
1.站立会议内容经过昨天一天的学习,大家了解到了很多新的知识,在各自任务实现方面也遇到了问题,比如首页的css样式实现.API接口的连接和地图接入的样式,经过今日站立会议,大家在一起讨论了各自出现的 ...

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

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

随机推荐

热门专题