前端js模板库 JinkoTemplate
有时候需要使用ajax来异步生成html,最土的方法就是用js的‘+’连接html代码,生成繁琐。一旦需要修改,对于少量的html代码到没啥问题,要是比较复杂的样式时,就真坑爹了,眼花缭乱有木有?JinkoTemplate库可以直接通过JinkoTemplate语法快速生成所需要的html代码,修改的时候也相当轻松,就如同修改当前html文件里的代码一样,不需要去修改js的地方。
以下是使用Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="jinko.template.js"></script> <script type="text/html" name="" id="aaa" cols="30" rows="10">
{@exp var x = 'end'}
{@loop data,row,key,seq}
{@seq}:{@key} = {@row} {@x}<br>
{@if row.a==1 && row.c==4}
yes
{@elseif row.c==3}
no
{@endif}
{@endloop}
<br><br>
{@loop ary,row,key,seq}
{@seq}:{@key} = {@row}<br>
{@endloop}
<br><br>
{@if booltrue}
true
{@endif}
{@if boolfalse}
false
{@endif}
<br><br>
{@if yi == 1}
一
{@elseif yi == 2}
二
{@else}
零
{@endif} </script>
<div id="bbb"></div>
<script type="text/javascript">
var tpl = document.getElementById('aaa').innerHTML;
var jinkoTpl = new JinkoTemplate();
jinkoTpl.assign('data', {a:1, asdb:'22110', c:3});
jinkoTpl.assign('ary', [1,2,3,4, '你好', 'nihao']);
jinkoTpl.assign('booltrue', true);
jinkoTpl.assign('boolfalse', false);
jinkoTpl.assign('yi', 2);
document.getElementById('bbb').innerHTML = jinkoTpl.parse(tpl);
</script>
</body>
</html>
demo运行结果:
1:a = 1 end
2:asdb = 22110 end
3:c = 3 end 1:0 = 1
2:1 = 2
3:2 = 3
4:3 = 4
5:4 = 你好
6:5 = nihao true 二
模板语法:
模板语句由‘{@’和‘}’组成,共有由下五个句子:
{@if} {@else} {@elseif} {@endif} if语句
if语句及分支,用法{@if 表达式}
{@endif}为结束标记
{@loop} {@endloop} 循环语句
{@loop}有四个参数{@loop data,row,key,seq},参数之间用英文逗号隔开。其中,data和row参数是必须的。data是数据源(如数组等),row是遍历中的data的子集。key和seq参数是可选的,key是数据源索引(数组下标),seq是当前第几个子集(序号)。
{@endloop}为循环结束标记
{@exp} js表达式
可以执行js语句
{@变量} 输出变量值
模板对象的assign方法:
assign用于给模板对象指定的内部变量赋值,内部变量则用于模板语法中可以直接使用的变量
模板对象的parse方法:
parse方法接收一个参数,该参数为模板字符串,对该字符串进行解析和生成最终的html语句并返回
示例:
var tpl = document.getElementById('aaa').innerHTML; //获取模板内容
var jinkoTpl = new JinkoTemplate(); //创建模板对象
jinkoTpl.assign('data', {a:1, asdb:'22110', c:3}); //赋值模板对象内部变量
jinkoTpl.assign('ary', [1,2,3,4, '你好', 'nihao']);//赋值模板对象内部变量
jinkoTpl.assign('booltrue', true); //赋值模板对象内部变量
jinkoTpl.assign('boolfalse', false); //赋值模板对象内部变量
jinkoTpl.assign('yi', 2); //赋值模板对象内部变量
document.getElementById('bbb').innerHTML = jinkoTpl.parse(tpl); //解析模板并添加到DOM元素中
库下载地址(未压缩): http://files.cnblogs.com/files/JinkoWu/jinko.template.js
库下载地址(压缩): http://files.cnblogs.com/files/JinkoWu/jinko.template.min.js
前端js模板库 JinkoTemplate的更多相关文章
- 前端JS模版库kino.razor - 原理流程分析 - 改进版轮子RazorJs
1.前言 从后台获取数据,在前端JS里面拼接字符串,不累吗?敢不敢找一款前端使使... 现在这种模板库比较多了,我用过的jquery-template .JsRender .听说过的一堆,还有各种MV ...
- 基于前端js模板替换的多语言方案思考
最近在做将一个系统多语言化的项目,系统使用的是ASP.NET,直接使用了一种已有的方案:在页面渲染时采用正则表达式替换{XXX:001 确定}格式的标记.但是这个方式增加了服务端的字符串处理,对页面性 ...
- 前端JS模板引擎Mustache.js的用法
Mustache.js在前端是一个非常强大的模板 Mustache用法参考
- 【超精简JS模版库/前端模板库】原理简析 和 XSS防范
使用jsp.php.asp或者后来的struts等等的朋友,不一定知道什么是模版,但一定很清楚这样的开发方式: <div class="m-carousel"> < ...
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
- 14个优秀 JS 前端框架、库、工具及其使用时机
这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景. 新的 Javascript 库层出不穷,从而Web 社区愈发活跃.多样.在多方面快速发展.详细去描述每一 ...
- 使用前端后台管理模板库admin-lte(转)
使用前端后台管理模板库admin-lte 使用前端后台管理模板库admin-lte 安装 搭建环境 安装 安装admin-lte,可以通过以下几种办法安装,下图是GitHub中admin-lte的主页 ...
- 前端Js框架汇总
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
- Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...
随机推荐
- LFS,编译自己的Linux系统 - 前言
近期工作计划:1. 上班时,用Django编写一个网站:2. 下班时,用C#.WPF编写一个单机版应用软件:3. 其他时间,根据LFS编译自己的Linux系统. LFS是一本书,书中列出了从零开始编译 ...
- Oracle EBS-SQL (CST-2):检查有BOM但成本不基于累积的数据.sql
select c.segment1 物料编码, ...
- android关于window
http://mobile.51cto.com/android-259922_all.htm http://mobile.51cto.com/android-259922.htm http://mob ...
- Boost 1.61.0 Library Documentation
http://www.boost.org/doc/libs/1_61_0/ Boost 1.61.0 Library Documentation Accumulators Framework for ...
- JIRA官方:缺陷与事务跟踪
快速跟踪软件缺陷 JIRA的网站页面使测试人员能够快速报告.管理.跟踪缺陷.使用键盘快捷键可以很容易地导航和修改问题.你还可以从IDE直接访问JIRA问题或者通过其它各种桌面客户端.手机客户端.浏览器 ...
- adobe reader安装完成之前被中断,错误代码150210解决方法
adobe reader安装完成之前被中断,错误代码150210解决方法出现这种情况是因为之前安装过adobe reader但是没有卸载删除干净进而导致重新安装时无法安装.为什么卸载不了大多数是因为3 ...
- python-django如何在sae中使用自带ImageField和FileField -django-上善若水小站
python-django如何在sae中使用自带ImageField和FileField -django-上善若水小站 python-django如何在sae中使用自带ImageField和FileF ...
- ping网络故障
网络的应用已渐渐深入我们的工作和生活,它带给了我们各方面的便利.因此,这种种的便利致使很多人对网络产生依赖性.那么,当电脑不能上网时,我们如何才能准确地判断电脑问题出在哪里?又如何能快捷地解决这故障? ...
- C#基础:事件(二) 【转】
上篇文章介绍了C#中事件的基本实现方式,在本文中,将对最常见的事件委托EventHandler和EventHandler<T>做介绍. 事实上,在前面文章的介绍中,已经涉及到了EventH ...
- ASP.NET MVC 学习之路-5
本文在于巩固基础 数据库开发模式: 1.数据库优先开发模式 2.模型优先开发模式 EntityFramework学习之一 最简单的一个案例 第一步创建模型 public class Student { ...