if laytpl 非_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;

模板就可写成如下：

{{ d.title }}

{{ d.intro }}

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

{{ d.list[i].name }}

所在城市：{{ d.list[i].city }}

{{# } }}

完整实例：

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

{{ d.title }}

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

姓名：{{ d.list[i].name }}

城市：{{ d.list[i].city }}

{{# } }}

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

//第三步：渲染模版

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;

});

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

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

{{d[i].addDate}}

{{d[i].noticeTitle}}

进入详情

{{d[i].noticeContent}}

{{# } }}

重要通知列表

重要信息

暂无通知消息哦！

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 = '上拉加载更多';

}else{

loadFlag = false;

loadAnimate.innerHTML = '没有更多了';

}

}else{

loadFlag = false;

if(pNo==1){

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

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

loadAnimate.innerHTML = '';

return;

}

loadAnimate.innerHTML = '没有更多了';

}

},{"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 = '正在加载中...';

initNotice(pNo);

}

});

}

function goToDetail(id){

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

}

Tippy&period;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模板引擎实例应用

在之前的一篇名为的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

JavaScript模板引擎

JavaScript模板引擎实例应用   在之前的一篇名为的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

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

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

JavaScript模板引擎artTemplate&period;js——为什么使用模板引擎？

作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

Javascript模板引擎mustache&period;js详解

mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

随机推荐

iOS可视化动态绘制连通图

上篇博客可视化了一下一些排序的过程,本篇博客就来聊聊图的东西.在之前的博客中详细的讲过图的相关内容,比如.当 ...

C&num; 中GUID生成格式的四种格式

var uuid = Guid.NewGuid().ToString(); // 9af7f46a-ea52-4aa3-b8c3-9fd484c2af12 var uuidN = Guid.NewGu ...

15&period;SpringMVC和Spring上下文关系(为什么SpringMVC可以调用到Spring)

springmvc上下文继承于spring, 也就是springmvc的上下文可访问spring上下文,在springmvc的上下文中可取得spring bean. spring上下文是spring启 ...

Maven构建简单的多模块项目

复制于http://www.cnblogs.com/luxh/p/3506750.html 做个记录 一般web项目会进行分模块开发.这里简单分为domain(领域层).persist(持久层).se ...

WeiXinMPSDK-微信C&num; SDK

微信C# SDK 微信公众号:Senparc.Weixin.MP.dll 微信企业号:Senparc.Weixin.QY.dl 微信开放平台:Senparc.Weixin.Open.dll 本库为.N ...

ML(2)--感知机

案例银行办信用卡--获得感知机 我们到银行办信用卡时,银行并不是直接就给你办卡的,而是会根据你的一些个人信息.消费信息.个人信誉等指标综合考虑后,才会决定是否给你办卡(不像现在银行办信用卡有点随意). ...

PowerDesigner反向生成PDM和name与注释互换

Option Explicit ValidationMode = True InteractiveMode = im_Batch Dim mdl 'the current model 'get the ...

&lbrack;PHP&rsqb; PHP多进程处理tcp连接

Java 1-Java 基础语法

一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如,一条狗是一个对象,它的 ...

微信小程序生命周期——小程序的生命周期及页面的生命周期。

最近在做微信小程序开发,也发现一些坑,分享一下自己踩过的坑. 生命周期是指一个小程序从创建到销毁的一系列过程. 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面. 首先来 ...