有时候需要使用ajax来异步生成html，最土的方法就是用js的‘+’连接html代码，生成繁琐。一旦需要修改，对于少量的html代码到没啥问题，要是比较复杂的样式时，就真坑爹了，眼花缭乱有木有？JinkoTemplate库可以直接通过JinkoTemplate语法快速生成所需要的html代码，修改的时候也相当轻松，就如同修改当前html文件里的代码一样，不需要去修改js的地方。

 

以下是使用Demo：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.  </head>
  7.  <body>
  8.  <script type="text/javascript" src="jinko.template.js"></script>
  9.  
  10.  <script type="text/html" name="" id="aaa" cols="30" rows="10">
  11.      {@exp var x = 'end'}
  12.      {@loop data,row,key,seq}
  13.          {@seq}:{@key} = {@row} {@x}<br>
  14.          {@if row.a==1 && row.c==4}
  15.              yes
  16.          {@elseif row.c==3}
  17.              no
  18.          {@endif}
  19.      {@endloop}
  20.      <br><br>
  21.      {@loop ary,row,key,seq}
  22.          {@seq}:{@key} = {@row}<br>
  23.      {@endloop}
  24.      <br><br>
  25.      {@if booltrue}
  26.          true&nbsp;
  27.      {@endif}
  28.      {@if boolfalse}
  29.          false
  30.      {@endif}
  31.      <br><br>
  32.      {@if yi == 1}
  33.          一
  34.      {@elseif yi == 2}
  35.          二
  36.      {@else}
  37.          零
  38.      {@endif}
  39.  
  40.  </script>
  41.  <div id="bbb"></div>
  42.  <script type="text/javascript">
  43.      var tpl = document.getElementById('aaa').innerHTML;
  44.      var jinkoTpl = new JinkoTemplate();
  45.      jinkoTpl.assign('data', {a:1, asdb:'22110', c:3});
  46.      jinkoTpl.assign('ary', [1,2,3,4, '你好', 'nihao']);
  47.      jinkoTpl.assign('booltrue', true);
  48.      jinkoTpl.assign('boolfalse', false);
  49.      jinkoTpl.assign('yi', 2);
  50.      document.getElementById('bbb').innerHTML = jinkoTpl.parse(tpl);
  51.  </script>
  52.  </body>
  53.  </html>

 demo运行结果:

  1. 1:a = 1 end
  2. 2:asdb = 22110 end
  3. 3:c = 3 end
  4.  
  5. 1:0 = 1
  6. 2:1 = 2
  7. 3:2 = 3
  8. 4:3 = 4
  9. 5:4 = 你好
  10. 6:5 = nihao
  11.  
  12. true  
  13.  
  14. 二

模板语法：

模板语句由‘{@’和‘}’组成，共有由下五个句子：

{@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语句并返回

示例：

  1.  var tpl = document.getElementById('aaa').innerHTML; //获取模板内容
  2.  var jinkoTpl = new JinkoTemplate(); //创建模板对象
  3.  jinkoTpl.assign('data', {a:1, asdb:'22110', c:3}); //赋值模板对象内部变量
  4.  jinkoTpl.assign('ary', [1,2,3,4, '你好', 'nihao']);//赋值模板对象内部变量
  5.  jinkoTpl.assign('booltrue', true); //赋值模板对象内部变量
  6.  jinkoTpl.assign('boolfalse', false); //赋值模板对象内部变量
  7.  jinkoTpl.assign('yi', 2); //赋值模板对象内部变量
  8.  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的更多相关文章

  1. 前端JS模版库kino.razor - 原理流程分析 - 改进版轮子RazorJs

    1.前言 从后台获取数据,在前端JS里面拼接字符串,不累吗?敢不敢找一款前端使使... 现在这种模板库比较多了,我用过的jquery-template .JsRender .听说过的一堆,还有各种MV ...

  2. 基于前端js模板替换的多语言方案思考

    最近在做将一个系统多语言化的项目,系统使用的是ASP.NET,直接使用了一种已有的方案:在页面渲染时采用正则表达式替换{XXX:001 确定}格式的标记.但是这个方式增加了服务端的字符串处理,对页面性 ...

  3. 前端JS模板引擎Mustache.js的用法

    Mustache.js在前端是一个非常强大的模板 Mustache用法参考

  4. 【超精简JS模版库/前端模板库】原理简析 和 XSS防范

    使用jsp.php.asp或者后来的struts等等的朋友,不一定知道什么是模版,但一定很清楚这样的开发方式: <div class="m-carousel"> < ...

  5. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  6. 14个优秀 JS 前端框架、库、工具及其使用时机

    这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景. 新的 Javascript 库层出不穷,从而Web 社区愈发活跃.多样.在多方面快速发展.详细去描述每一 ...

  7. 使用前端后台管理模板库admin-lte（转）

    使用前端后台管理模板库admin-lte 使用前端后台管理模板库admin-lte 安装 搭建环境 安装 安装admin-lte,可以通过以下几种办法安装,下图是GitHub中admin-lte的主页 ...

  8. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  9. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

随机推荐

  1. nginx安装及配置支持php的教程(全)

    本文的实验环境为:Centos4.5,nginx版本为:nginx-0.7.26   pcre-7.8.tar.gz  正则表达式下载地址:ftp://ftp.csx.cam.ac.uk/pub/so ...

  2. 環氧樹脂對COB的影響

    COB的封膠一般使用單液 Epoxy(環氧樹脂),也可以使用雙液(Epoxy+硬化劑),雙液的成品品質可靠度雖然比較高,但是保存及維護非常麻煩,所以一般的 COB 都還是採用單液的製程. 其次是如何控 ...

  3. 什麼是 N-key 與按鍵衝突？原理說明、改善技術、選購注意完全解析

    不管是文書處理或遊戲中,我們都經常會使用到組合鍵,也就是多顆按鍵一起按下,執行某些特定的功能.有時候你可能會發現,明明只按下2顆鍵,再按下第3顆鍵時訊號卻沒有輸出.要是打報告到一半遇到這種狀況還好,如 ...

  4. 无法关闭的QT程序——思路开阔一下，原来这么简单！

    做一个无法关闭的QT程序(想关闭时要在任务管理器里关闭),看似很难, 其实它并不难,只要让程序在关闭时启动它自身就可以了. 上代码: #include <QtGui> class Temp ...

  5. Silverlight中的拖拽实现的图片上传

    原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接 ...

  6. .net Mvc Controller 接收 Json/post方式 数组 字典 类型 复杂对象

    原文地址:http://www.cnblogs.com/fannyatg/archive/2012/04/16/2451611.html ------------------------------- ...

  7. poj 3753 Training little cats_矩阵快速幂

    题意: 通过各种操作进行,给第i只猫花生,第i只猫吃光花生,第i只猫和第j只猫互换花生,问n次循环操作后结果是什么 很明显是构建个矩阵,然后矩阵相乘就好了 #include <iostream& ...

  8. hdu 1010 Tempter of the Bone（dfs暴力）

    Problem Description The doggie found a bone in an ancient maze, which fascinated him a lot. However, ...

  9. poj 3641 Pseudoprime numbers（快速幂）

    Description Fermat's theorem states that for any prime number p and for any integer a > 1, ap = a ...

  10. POJ 1734 求最小环路径 拓展Floyd

    九野的博客,转载请注明出处:http://blog.csdn.net/acmmmm/article/details/11888019 题意: n个点 m条无向边 下面m条有权无向边 问图中最小环的路径 ...