1、在html界面声明模板(注意type类型)

<script id="tmplInvokeProvider" type="text/x-jquery-tmpl">
<div class="deptServiceItem dtable">
<div class="dtablecell">
<div class="">
<div class="deptName">${DeptName}</div>
<div class="deptDesc">${DeptDesc}-<label title="${SourceName}">${SourceNameAbbreviation}</label></div>
</div>
</div>
<div class="dtablecell deptTime">{{= moment(DeptTime).format("hh:mm MM-DD")}}</div>
</div>
</script>

2、引用js   jquery.tmpl.min.js   (无法提供连接,在下面我会把内容发出来,你们自行建立文件并把内容粘贴进去即可)

3、使用模板并给模板对应的位置赋值然后追加到对应的标签中。

var dataTemp = {
DeptName: item.ProviderDeptName,
DeptDesc: item.ProviderAppName,
DeptTime: item.CreateTime,
SourceName: item.SourceName,
SourceNameAbbreviation: item.SourceName.length > 3 ? (item.SourceName.substr(0, 3) + '...') : item.SourceName
}
$("#tmplInvokeProvider").tmpl(dataTemp).appendTo('.layui-tab .layui-tab-content');
 
 
注意注意:如果想输出的html的话,模板中的占位符应该是  {{html name}}
 
 

以下为jquery.tmpl.min.js内容

/*!
* jQuery Templates Plugin 1.0.0pre
* http://github.com/jquery/jquery-tmpl
* Requires jQuery 1.4.2
*
* Copyright 2011, Software Freedom Conservancy, Inc.
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(t){function e(e,n,l,a){var r={data:a||0===a||a===!1?a:n?n.data:{},_wrap:n?n._wrap:null,tmpl:null,parent:n||null,nodes:[],calls:u,nest:c,wrap:f,html:m,update:s};return e&&t.extend(r,e,{nodes:[],parent:n}),l&&(r.tmpl=l,r._ctnt=r._ctnt||r.tmpl(t,r),r.key=++w,(T.length?g:y)[w]=r),r}function n(e,a,r){var i,p=r?t.map(r,function(t){return"string"==typeof t?e.key?t.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g,"$1 "+_+'="'+e.key+'" $2'):t:n(t,e,t._ctnt)}):e;return a?p:(p=p.join(""),p.replace(/^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/,function(e,n,a,r){i=t(a).get(),o(i),n&&(i=l(n).concat(i)),r&&(i=i.concat(l(r)))}),i?i:l(p))}function l(e){var n=document.createElement("div");return n.innerHTML=e,t.makeArray(n.childNodes)}function a(e){return Function("jQuery","$item","var $=jQuery,call,__=[],$data=$item.data;with($data){__.push('"+t.trim(e).replace(/([\\'])/g,"\\$1").replace(/[\r\t\n]/g," ").replace(/\$\{([^\}]*)\}/g,"{{= $1}}").replace(/\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,function(e,n,l,a,r,p,o){var u,c,f,m=t.tmpl.tag[l];if(!m)throw"Unknown template tag: "+l;return u=m._default||[],p&&!/\w$/.test(r)&&(r+=p,p=""),r?(r=i(r),o=o?","+i(o)+")":p?")":"",c=p?r.indexOf(".")>-1?r+i(p):"("+r+").call($item"+o:r,f=p?c:"(typeof("+r+")==='function'?("+r+").call($item):("+r+"))"):f=c=u.$1||"null",a=i(a),"');"+m[n?"close":"open"].split("$notnull_1").join(r?"typeof("+r+")!=='undefined' && ("+r+")!=null":"true").split("$1a").join(f).split("$1").join(c).split("$2").join(a||u.$2||"")+"__.push('"})+"');}return __;")}function r(e,l){e._wrap=n(e,!0,t.isArray(l)?l:[h.test(l)?l:t(l).html()]).join("")}function i(t){return t?t.replace(/\\'/g,"'").replace(/\\\\/g,"\\"):null}function p(t){var e=document.createElement("div");return e.appendChild(t.cloneNode(!0)),e.innerHTML}function o(n){function l(n){function l(t){t+=u,i=c[t]=c[t]||e(i,y[i.parent.key+u]||i.parent)}var a,r,i,p,o=n;if(p=n.getAttribute(_)){for(;o.parentNode&&1===(o=o.parentNode).nodeType&&!(a=o.getAttribute(_)););a!==p&&(o=o.parentNode?11===o.nodeType?0:o.getAttribute(_)||0:0,(i=y[p])||(i=g[p],i=e(i,y[o]||g[o]),i.key=++w,y[w]=i),k&&l(p)),n.removeAttribute(_)}else k&&(i=t.data(n,"tmplItem"))&&(l(i.key),y[i.key]=i,o=t.data(n.parentNode,"tmplItem"),o=o?o.key:0);if(i){for(r=i;r&&r.key!=o;)r.nodes.push(n),r=r.parent;delete i._ctnt,delete i._wrap,t.data(n,"tmplItem",i)}}var a,r,i,p,o,u="_"+k,c={};for(i=0,p=n.length;p>i;i++)if(1===(a=n[i]).nodeType){for(r=a.getElementsByTagName("*"),o=r.length-1;o>=0;o--)l(r[o]);l(a)}}function u(t,e,n,l){return t?void T.push({_:t,tmpl:e,item:this,data:n,options:l}):T.pop()}function c(e,n,l){return t.tmpl(t.template(e),n,l,this)}function f(e,n){var l=e.options||{};return l.wrapped=n,t.tmpl(t.template(e.tmpl),e.data,l,e.item)}function m(e,n){var l=this._wrap;return t.map(t(t.isArray(l)?l.join(""):l).filter(e||"*"),function(t){return n?t.innerText||t.textContent:t.outerHTML||p(t)})}function s(){var e=this.nodes;t.tmpl(null,null,null,this).insertBefore(e[0]),t(e).remove()}var d,$=t.fn.domManip,_="_tmplitem",h=/^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,y={},g={},v={key:0,data:{}},w=0,k=0,T=[];t.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,n){t.fn[e]=function(l){var a,r,i,p,o=[],u=t(l),c=1===this.length&&this[0].parentNode;if(d=y||{},c&&11===c.nodeType&&1===c.childNodes.length&&1===u.length)u[n](this[0]),o=this;else{for(r=0,i=u.length;i>r;r++)k=r,a=(r>0?this.clone(!0):this).get(),t(u[r])[n](a),o=o.concat(a);k=0,o=this.pushStack(o,e,u.selector)}return p=d,d=null,t.tmpl.complete(p),o}}),t.fn.extend({tmpl:function(e,n,l){return t.tmpl(this[0],e,n,l)},tmplItem:function(){return t.tmplItem(this[0])},template:function(e){return t.template(e,this[0])},domManip:function(e,n,l){if(e[0]&&t.isArray(e[0])){for(var a,r=t.makeArray(arguments),i=e[0],p=i.length,o=0;p>o&&!(a=t.data(i[o++],"tmplItem")););a&&k&&(r[2]=function(e){t.tmpl.afterManip(this,e,l)}),$.apply(this,r)}else $.apply(this,arguments);return k=0,d||t.tmpl.complete(y),this}}),t.extend({tmpl:function(l,a,i,p){var o,u=!p;if(u)p=v,l=t.template[l]||t.template(null,l),g={};else if(!l)return l=p.tmpl,y[p.key]=p,p.nodes=[],p.wrapped&&r(p,p.wrapped),t(n(p,null,p.tmpl(t,p)));return l?("function"==typeof a&&(a=a.call(p||{})),i&&i.wrapped&&r(i,i.wrapped),o=t.isArray(a)?t.map(a,function(t){return t?e(i,p,l,t):null}):[e(i,p,l,a)],u?t(n(p,null,o)):o):[]},tmplItem:function(e){var n;for(e instanceof t&&(e=e[0]);e&&1===e.nodeType&&!(n=t.data(e,"tmplItem"))&&(e=e.parentNode););return n||v},template:function(e,n){return n?("string"==typeof n?n=a(n):n instanceof t&&(n=n[0]||{}),n.nodeType&&(n=t.data(n,"tmpl")||t.data(n,"tmpl",a(n.innerHTML))),"string"==typeof e?t.template[e]=n:n):e?"string"!=typeof e?t.template(null,e):t.template[e]||t.template(null,h.test(e)?e:t(e)):null},encode:function(t){return(""+t).split("<").join("&lt;").split(">").join("&gt;").split('"').join(""").split("'").join("'")}}),t.extend(t.tmpl,{tag:{tmpl:{_default:{$2:"null"},open:"if($notnull_1){__=__.concat($item.nest($1,$2));}"},wrap:{_default:{$2:"null"},open:"$item.calls(__,$1,$2);__=[];",close:"call=$item.calls();__=call._.concat($item.wrap(call,__));"},each:{_default:{$2:"$index, $value"},open:"if($notnull_1){$.each($1a,function($2){with(this){",close:"}});}"},"if":{open:"if(($notnull_1) && $1a){",close:"}"},"else":{_default:{$1:"true"},open:"}else if(($notnull_1) && $1a){"},html:{open:"if($notnull_1){__.push($1a);}"},"=":{_default:{$1:"$data"},open:"if($notnull_1){__.push($.encode($1a));}"},"!":{open:""}},complete:function(){y={}},afterManip:function(e,n,l){var a=11===n.nodeType?t.makeArray(n.childNodes):1===n.nodeType?[n]:[];l.call(e,n),o(a),k++}})});

JQuery简单实用的模板引擎的更多相关文章

  1. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  2. 最简单的JavaScript模板引擎

    在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...

  3. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  4. Epii.js 一个极其简单的Js模板引擎

    Epii.js 简约而不简单的Js模板引擎 Epii.js 简约而不简单的JavaScript模板引擎 # 特性 一个轻量级模板引擎,可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑 ...

  5. 一个简单的PHP模板引擎

    PHP早期开发中通常是PHP代码和HTML代码混写,这也使代码中充斥着数据库操作,逻辑处理等.当项目不大时,这样的代码还可以接受,但是随着项目不断扩大,我们就会发现同一个文件中同时存在前端逻辑和后端处 ...

  6. jquery template.js前端模板引擎

    作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...

  7. 转载---最简单的JavaScript模板引擎

    转载自:http://www.cnblogs.com/dolphinX/p/3489269.html,http://blog.jobbole.com/56689/

  8. jquery的一个模板引擎-zt

    jQuery-jTemplate.js下载:http://jtemplates.tpython.com/ 一 , 简单介绍 它是一个基于jQuery开发的javascript模板引擎.它主要的作用如下 ...

  9. jQuery的几种简单实用效果

    许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang=&qu ...

随机推荐

  1. javascript基本类型及类型转换

    每种语言都有自己的基本类型,javascript也不例外.在javascript中有五大基本类型,分别是number,string,boolean,null,undefined.其他不属于这五种基本类 ...

  2. c#开发应避免的几个小滥用

    一 String和StringBuilder              少量的字符串操作不宜采用StringBuilder.      由于string是不可变得对象,对于string的叠加,每次操作 ...

  3. 【LeetCode 3】无重复字符的最长子串

    描述 [题解] 尺取法 对于[l..r]这段 如果新加进来的s[r]有和之前的重复. 那么就不用重新开始了. 直接递增左区间. 让这段没有重复数字了再说. *****然后再把s[r]加进去. [代码] ...

  4. debian 8 安装 codeblocks

    CodeBlocks优点: 1.所占资源少,对电脑硬件的要求低 2.开源软件,可以查看源代码,虽然我不会修改,但是如果我做一个IDE的话,我一定会参考这个伟大的软件的. 3.最重要的是,它完全跨了三大 ...

  5. linux find相关 (持续更新中)

    按名字查找 find . -name *.txt find . -name test* # . 指的是当前路径, 查找全局的话把. 换成/ 查找并删除多个文件 find -type f -name & ...

  6. git回退单个文件

    git原理 Git的版本库里存了很多东西,其中最重要的就是称为stage(或者叫index)的暂存区,还有Git为我们自动创建的第一个分支master,以及指向master的一个指针叫HEAD. gi ...

  7. date和string转换用joda包

    import org.joda.time.DateTime;import org.joda.time.format.DateTimeFormat;import org.joda.time.format ...

  8. java-Eclipse中使用JDBC连接数据库及相关操作

    准备工作:mysql-connector-java-5.1.6-bin.jar配置 package com.job; import java.sql.Connection; import java.s ...

  9. PAT_A1024#Palindromic Number

    Source: PAT A1024 Palindromic Number (25 分) Description: A number that will be the same when it is w ...

  10. Java 反射获取私有方法

    通常我们创建一个类时,它的私有方法在类外是不可见的,但是可以通过反射机制来获取调用.具体的反射机制的介绍大家自己百度. 所以反射可能会破坏我们的单例模式,当然解决方案也是有的,就是做个标记记录次数,第 ...