发现一枚前端数据绑定导弹：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. const与readonly

    readonly 关键字与 const: const 字段只能在该字段的声明中初始化.readonly 字段可以在声明或构造函数中初始化. 因此,根据所使用的构造函数,readonly 字段可能具有不 ...

  2. Java基础之路（三）下--流程控制语句

    上次我们说了流程控制语句中的if语句,那本次就来聊聊switch语句. if else语句可以用来描述"二叉路口",而switch可用于"多叉路口"的情况. s ...

  3. iOS开发RunLoop

    最近处于离职状态,时间也多了起来,但是学习还是不能放松,今天总结一下RunLoop,RunLoop属于iOS系统层的东西,还是比较重要的. 一.什么是RunLoop 字面意思看是跑圈,也可以看作运行循 ...

  4. AQS阻塞唤醒工具LockSupport

    LockSupport在JDK源码中描述为:构建锁和其他同步类的基本线程阻塞原语,构建更高级别的同步工具集.LockSupport提供的park/unpark从线程的粒度上进行阻塞和唤醒,park/u ...

  5. CSV工具类

    分享自己昨天写的CSV工具类, 主要实现解析CSV格式, 直接上代码 #region private /// <summary> /// 从sr当前位置解析一个栏位 /// </su ...

  6. javaWEB与JSP指令

    JSP三大指令  一个jsp页面中,可以有0~N个指令的定义!1. page --> 最复杂:<%@page language="java" info="xx ...

  7. RabbitMQ集群搭建

    准备三个节点,系统为CentOS7 Node IP rabbitmq01 172.50.0.64 rabbitmq02 172.50.0.65 rabbitmq03 172.50.0.66 这里把no ...

  8. centos 6.5 搭建ftp服务器

    linux下一般使用vsftpd作为ftp服务器. vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序.特点是小巧轻快,安全易用. 下面是安装配置步骤: 1.安装vsftpd yum i ...

  9. python３基础之整数常用的方法整理

    希望对大家学习或者使用python3能具有一定的参考价值. __abs__     #返回一个数的绝对值 >>> num3=-22 >>> num3.__abs__ ...

  10. 老李推荐：第6章3节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-命令翻译类

    老李推荐:第6章3节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-命令翻译类   每个来自网络的字串命令都需要进行解析执行,只是有些是在解析的过程中直接执行 ...