发现一枚前端数据绑定导弹：laytpl,官网：http://www.layui.com/laytpl/

为了不用angularJS等较为重量级的，和繁琐的配置，所以就用了laytpl,可以配合JQ使用

laytpl.js源码如下：

/** 

 @Name：laytpl-v1.1 精妙的js模板引擎

 @Author：贤心 - 2014-08-16

 @Site：http://sentsin.com/layui/laytpl

 @License：MIT license

 */

;!function(){"use strict";var f,b={open:"{{",close:"}}"},c={exp:function(a){return new RegExp(a,"g")},query:function(a,c,e){var f=["#([\\s\\S])+?","([^{#}])*?"][a||0];return d((c||"")+b.open+f+b.close+(e||""))},escape:function(a){return String(a||"").replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/'/g,"'").replace(/"/g,"&quot;")},error:function(a,b){var c="Laytpl Error：";return"object"==typeof console&&console.error(c+a+"\n"+(b||"")),c+a}},d=c.exp,e=function(a){this.tpl=a};e.pt=e.prototype,e.pt.parse=function(a,e){var f=this,g=a,h=d("^"+b.open+"#",""),i=d(b.close+"$","");a=a.replace(/[\r\t\n]/g," ").replace(d(b.open+"#"),b.open+"# ").replace(d(b.close+"}"),"} "+b.close).replace(/\\/g,"\\\\").replace(/(?="|')/g,"\\").replace(c.query(),function(a){return a=a.replace(h,"").replace(i,""),'";'+a.replace(/\\/g,"")+'; view+="'}).replace(c.query(1),function(a){var c='"+(';return a.replace(/\s/g,"")===b.open+b.close?"":(a=a.replace(d(b.open+"|"+b.close),""),/^=/.test(a)&&(a=a.replace(/^=/,""),c='"+_escape_('),c+a.replace(/\\/g,"")+')+"')}),a='"use strict";var view = "'+a+'";return view;';try{return f.cache=a=new Function("d, _escape_",a),a(e,c.escape)}catch(j){return delete f.cache,c.error(j,g)}},e.pt.render=function(a,b){var e,d=this;return a?(e=d.cache?d.cache(a,c.escape):d.parse(d.tpl,a),b?(b(e),void 0):e):c.error("no data")},f=function(a){return"string"!=typeof a?c.error("Template not found"):new e(a)},f.config=function(a){a=a||{};for(var c in a)b[c]=a[c]},f.v="1.1","function"==typeof define?define(function(){return f}):"undefined"!=typeof exports?module.exports=f:window.laytpl=f}();

或者下载地址：laytpl.js

1.引用该js

2.建立<script type="text/html"></script>的模板

3.用laytpl.js吧得到的数据加入到<script type="text/html"></script>模板

4.把模板渲染到你要的html的demo

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <meta charset="utf-8" />

   <script src="/laytpl/laytpl.js"></script>

   <script>

     //假设你得到了这么一段数据

     var data = {

       title: '前端圈',

       intro: '一群码js的骚年，幻想改变世界，却被世界改变。',

       list: [{ name: '贤心', city: '杭州' }, { name: '谢亮', city: '北京' }, { name: '浅浅', city: '杭州' }, { name: 'Dem', city: '北京' }]

     };

     window.onload = function () {

       //建立视图。用于呈现渲染结果。

       var gettpl = document.getElementById('testTpl').innerHTML;

       laytpl(gettpl).render(data, function (html) {

         //得到的模板渲染到html

         document.getElementById('testDiv').innerHTML = html;

       });

     }

   </script>

 </head>

 <body>

   <script id="testTpl" type="text/html">

     <h1>{{ d.title }}</h1>

     <p>{{d.intro}}</p>

     <ul>

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

       <li>

         <span>姓名：{{ d.list[i].name }}</span>

         <span>城市：{{ d.list[i].city }}</span>

       </li>

       {{# } }}

     </ul>

   </script>

   <div id="testDiv"></div>

 </body>

 </html>

显示结果：

用laytpl获取模板的另一种写法：

var tpl = laytpl(gettpl);
tpl.render(data, function(result){
console.log(result);
document.getElementById("testDiv2").innerHTML = result;
});

以下是官方文档：

//第一步：编写模版。你可以使用一个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;

});


 一、模版语法

输出一个普通字段，不转义html：   {{ d.field }}

输出一个普通字段，并转义html：   {{= d.field }}

JavaScript脚本： {{# JavaScript statement }}

二、内置方法

1)：laytpl(template);   //核心函数，返回一个对象

  var tpl = laytpl(template);

  tpl.render(data, callback);   //渲染方法，返回渲染结果，支持异步和同步两种模式

    a)：异步

    tpl.render(data, function(result){

      console.log(result);

    });

    b)：同步

    var result = tpl.render(data);

    console.log(result);

2)：laytpl.config(options); //初始化配置

  options是一个对象

  {open: '开始标签', close: '闭合标签'}

3)：laytpl.v  //获取版本号
希望可以帮助到大家。 

laytpl--前端数据绑定的更多相关文章

  1. ASP.NET 前端数据绑定---<%#%>及Eval()的使用

    ASP.NET 前端html代码中会经常出现的<%%>的代码,里面的文本其实就是不能直接输出到客户端浏览器的文本,是需要服务器解释的. 在ASP中,<%%>里面的文本是vbsc ...

  2. 如何基于layui的laytpl实现数据绑定

    想了半天才想起自己园子的登录密码.可想而知,多长时间没登录了 正文一开始用layui做了几个管理系统,所以用起来觉得确实很容易上手,管理后台最常用的就是form和table以及弹窗类.layui提供的 ...

  3. DataGrid数据绑定

    后台数据绑定 用户场景是生成报表,展示公司各员工每个月的绩效 数据结构 包括报表和单个员工绩效两个实体 public class Report { /// <summary> /// 统计 ...

  4. react新手入门(序)

    之前在软件园使用的是react,当时为了做个集光推送,自己去搭过react,这次项目中继续使用react,于是又重新操作了遍,恰巧公司买了本react的书籍,这本书写的非常好,看着并不觉得拗口,很容易 ...

  5. [心得体会]SpringMVC源码分析

    1. SpringMVC (1) springmvc 是什么? 前端控制器, 主要控制前端请求分配请求任务到service层获取数据后反馈到springmvc的view层进行包装返回给tomcat, ...

  6. 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  7. 前端MVC学习笔记（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  8. 前端MVC Vue2学习总结（一）——MVC与vue2概要、模板、数据绑定与综合示例

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...

  9. 16、前端知识点--Object.defineProperty 的用法+双向数据绑定原理解析

    一.Object.defineProperty 的用法 Object.defineProperty 可以用于给对象添加更新属性. <script> // Object.defineProp ...

随机推荐

  1. canvas基础—图形变换

    1.canvas转换方法 1.1canvas转换方法 二.canvas实现图形的中心点旋转 step1:获取canva元素并指定canvas的绘图环境 var canvas=document.getE ...

  2. [原创]HBase学习笔记（3）- Java程序访问HBase

    这里介绍使用java api来访问和操作HBase,例如create.delete.select.update等操作. 1.HBase配置 配置HBase使用的zookeeper集群地址和端口. pr ...

  3. 我的第一本docker书-阅读笔记

    花了三四天看完了我的第一本docker书,话说书写的还是挺简单易懂的.与传统的VM,VirtualBox,或者与那种内核虚拟的xen,kvm相比,docker作为一种容器的虚拟方式,以启动进程的方式来 ...

  4. [Openfire]使用WebSocket建立Openfire的客户端

    近日工作闲暇之余,对IM系统产生了兴趣,转而研究了IM的内容.找了半天,知道比较流行的是Openfire的系统,Openfire有许多平台实现,由于我是做Web的,所以当然是希望寻找Web的实现.Op ...

  5. oracle server config

    安装oracle数据库软件 database/runInstaller; ##执行该程序开始安装 创建数据库 在oracle用户的图形界面oracle用户中 新开启一个终端,直接输入命令dbca会弹出 ...

  6. windows 安装Beautiful Soup(转)

    Beautiful Soup是一个Python的一个库,主要为一些短周期项目比如屏幕抓取而设计.有三个特性使得它非常强大: 1.Beautiful Soup提供了一些简单的方法和Python术语,用于 ...

  7. unity传送门类似效果实现

    简述 在传送门中,核心的玩法是在地上或者墙上打开2个可以联通的洞来实现传送的效果.以此扩展加入解谜要素构成游戏的核心. 这里尝试使用unity来实现传送门的核心功能,具体功能分析如下: 1.传送门的模 ...

  8. git工具使用方法及常用命令

    git下载地址:https://git-for-windows.github.io/git环境变量配置:增加:GIT_HOME = C:\Git (文件夹为git软件的安装文件夹)Path添加: %G ...

  9. Java进阶之多线程

    多线程 多线程(multiple thread)是计算机实现多任务并行处理的一种方式. 在单线程情况下,计算机中存在一个控制权,并按照顺序依次执行指令.单线程好像是一个只有一个队长指挥的小队,整个小队 ...

  10. Centos/RHEL上查看主板型号

    老是搞忘记,专门做个记录: [root@media ~]# dmidecode | grep "Product Name" Product Name: To be filled b ...