laytpl--前端数据绑定 (示例)
原文出处: http://www.cnblogs.com/Bruke/p/6802015.html
laytpl--前端数据绑定
发现一枚前端数据绑定导弹:laytpl,官网:http://www.layui.com/laytpl/
为了不用angularJS等较为重量级的,和繁琐的配置,所以就用了laytpl,可以配合JQ使用
laytpl.js源码如下:
![](/assets/blank.gif)
/** @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,"&").replace(/</g,"<").replace(/>/g,">").replace(/'/g,"'").replace(/"/g,""")},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}();
![](/assets/blank.gif)
或者下载地址:laytpl.js
1.引用该js
2.建立<script type="text/html"></script>的模板
3.用laytpl.js吧得到的数据加入到<script type="text/html"></script>模板
4.把模板渲染到你要的html的demo
![](/assets/blank.gif)
<!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>
![](/assets/blank.gif)
显示结果:
用laytpl获取模板的另一种写法:
![](/assets/blank.gif)
var tpl = laytpl(gettpl);
tpl.render(data, function(result){
console.log(result);
document.getElementById("testDiv2").innerHTML = result;
});
![](/assets/blank.gif)
以下是官方文档:
//第一步:编写模版。你可以使用一个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--前端数据绑定 (示例)相关推荐
- web前端开发示例_40多个针对Web开发人员HTML5教程和示例
web前端开发示例 HTML 5 offers a lot of new features to help web developers. In the last few days, I have r ...
- 基于qiankun搭建ng-alain15微前端项目示例实践
基础环境 实践日期:2023-03-04 ng versionAngular CLI: 15.2.1 Node: 18.14.2 Package Manager: npm 9.5.0 OS: win3 ...
- Vue入门之Web端CURD前端项目示例
Vue入门之Web端CURD前端项目示例 随着vue.js越来越火,很多不太懂前端的小伙伴想要入坑.而入坑最好的办法就是上手实际操作,因此本文将重点放在实际操作上,对理论不做过多解释,不明白的地方小伙 ...
- yh-app(基于vue和uni-app的前端项目示例)
yh-app 简介 yh-app是一个高度模仿手机端樱花动漫的前端项目,旨在提供一个通俗易懂.简洁明了的前端项目示例,帮助开发者熟悉例如vue.css以及uni这类比较常见的技术在实际项目开发中的使用 ...
- 如何基于layui的laytpl实现数据绑定
1.前言 一开始用layui做了几个管理系统,所以用起来觉得确实很容易上手,管理后台最常用的就是form和table以及弹窗类.layui提供的form table layer已经是很简洁好用了,抛开 ...
- [deviceone开发]-数据绑定示例
2019独角兽企业重金招聘Python工程师标准>>> 一.简介 这个示例详细介绍了do平台数据bind的灵活使用方式.所有UI组件都支持binddata的方式,可以绑定到do_Ha ...
- 后端SMM+前端Vue示例项目开发总结
1.前后端连接跨域 当前后端分布在两个不同的电脑上时,前端人员需要调用后端提供的接口进行调试,后端开发给前端的接口命名格式: http://+IP+:+端口+/+请求地址映射名 如: //前端请求 J ...
- thymeleaf前端数据绑定
thymeleaf是一种模板,如果想在html对表格进行绑定,可以这么做: <html xmlns:th="http://www.thymeleaf.org"> < ...
- 蜗牛学院的html网页成像,蜗牛学院——web前端开发(示例代码)
------------恢复内容开始------------ 一.第一阶段 专业核心基础 1.第一周 HTML和CSS入门 知识要点: web前端开发环境.HTML常用标签.表单元素.table布局. ...
- 两个umijs/max项目使用微前端简单示例
本人使用umijs/max搭建项目(内置了qiankun插件) 主应用 .umirc.ts中defineConfig qiankun: {master: {apps: [{name: 'app1',e ...
最新文章
- sqlserver 行转列
- 小程序 - 效果处理之技巧合集(更新中...)
- 从实例入手学习Shiro自定义Realm实现查询数据进行验证
- c语言前后指针怎么用,详解一下——C语言指针该怎么用
- Parent Equipment 和IBASE relationship创建时的检查逻辑
- MFC中Windows窗口消息循环及多线程之间关系
- MFC中使用CTabCtrl或CPropertySheet实现标签页
- 剑指Offer——数组中出现次数超过一半的数字
- 计算机与科学a,[第一单元] 计算机与计算机科学-课文A参考译文
- 重庆计算机一级跟全国计算机一级都考什么,全国计算机等级考试一级都考什么内容?...
- 百度编辑器上传图片后转到七牛存储
- c++游戏服务器方向需要多少功底?
- jenkins k8s 动态增减 jenkins-salve (1) 制作部署jenkins-master 镜像
- 白皮书:柬埔寨通过区块链支付实现无美元未来
- 打印表格打印机没有反应_打印机没反应怎么回事
- 多台电脑共享上网的方法:在Windows XP中设置Internet连接共享
- android三星note20.6,三星Note20评测:这支手写笔是最大亮点?
- 开发板ARM+FPGA架构运动控制卡 运动控制器
- 物联网培训预示着我们将进入智能时代
- 【OKHTTP3】OKHTTP3使用GET和POST