laytpl--前端数据绑定

最新推荐文章于 2024-01-06 16:52:39 发布

黄宝康

最新推荐文章于 2024-01-06 16:52:39 发布

阅读量1.2k

点赞数

分类专栏： layui

layui 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

内容转载自https://www.cnblogs.com/Bruke/p/6802015.html
发现一枚前端数据绑定导弹：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,"&#39;").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}();

1.引用该js

2.建立的模板

3.用laytpl.js吧得到的数据加入到模板

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  //获取版本号

专业墙纸贴纸厨房用具装饰出售，本人网店经营，访问即是爱

博客对你有用记得访问下哦，增加下访问量，如有需要可以下单购买哦^_^。店铺地址https://item.taobao.com/item.htm?id=570637716145

黄宝康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
laytpl--前端数据绑定

内容转载自https://www.cnblogs.com/Bruke/p/6802015.html 发现一枚前端数据绑定导弹：laytpl,官网：http://www.layui.com/laytpl/为了不用angularJS等较为重量级的，和繁琐的配置，所以就用了laytpl,可以配合JQ使用laytpl.js源码如下：/** @Name：laytpl-v1.1 精妙的...
复制链接

扫一扫

专栏目录