发现一枚前端数据绑定导弹：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. SQL函数和SQL Server2008

    1.绝对值   SQL:select abs(-1) value  O:select abs(-1) value from dual  2.取整(大)   S:select ceiling(-1.00 ...

  2. 学习一点Markdown的基本知识

    本文于2017年3月18日首发于LinkedIn,请参考链接 这个世界的进步是由一些"懒"的人推动的.今天讲的这个Markdown,其实也是因为一批厌倦了HTML的各种标签的语法, ...

  3. Android自学反思总结(中)

    后来在导员的推荐加上自己的好奇心给电脑装上了Ubuntu,因为Android的内核就是Linux,导员想让我们及早接触,及早熟悉,这也是我后来一直冷落Windows的原因,装Ubuntu的过程是艰辛的 ...

  4. Logistic Regression理论总结

    简述: 1. LR 本质上是对正例负例的对数几率做线性回归,因为对数几率叫做logit,做的操作是线性回归,所以该模型叫做Logistic Regression. 2. LR 的输出可以看做是一种可能 ...

  5. 配置linux实现路由功能

    说明: 主机1是内网的数据存储服务器,只有一块网卡10.0.0.2: 主机2是web服务器,有两块网卡,一块面向内网10.0.0.3,一块面向外网192.168.220.136: (因为是在虚拟机的环 ...

  6. BFC详解

    BFC(block formating context),翻译过来就是块级格式化上下文.我们可以理解为:BFC就是一个Block-level Box内部的Block-level Box布局的一系列规则 ...

  7. jquery data属性的使用

    var func=function(){console.log("test")};$("div").data("test",func);$( ...

  8. css 多行超长点点点

    超长?不是很好吗?什么?不好?有什么坏处吗?会使人想哭的! 这里来说下,超长点点点的处理: 一行超长点点点,这个很多都会吧! text-overflow: ellipsis; white-space: ...

  9. Struts2基础学习(一)—初识Struts2

      目录 一.什么是Struts2 二.搭建Struts2的开发环境 三.Struts2的配置文件 四.MVC模式 一.什么是Struts2      Struts2是一个非常优秀的MVC框架,由传统 ...

  10. JDBC基础学习(四)—数据库事务

    一.事务基本认识 1.事务的概述      为了保证数据库中数据的一致性,数据的操作应当是离散的成组的逻辑单元.当它全部完成时,数据的一致性可以保持,而当这个单元中的一部分操作失败,整个事务应当全部视 ...