利用art.template模仿VUE
2024-10-20 07:49:22
首先先看一下Typescript代码：
import template = require('art-template/lib/template-web');
interface TemplateBindConfig {
el: string
data: object
}
class TmpBind {
el: string
template: any
data: object
renderFn: any
// 构造函数
constructor(config:TemplateBindConfig) {
// 绑定的容器id
this.el = config.el;
// 注入的数据
this.data = config.data;
this.renderFn = null
var nodes=document.querySelector(config.el).children;
var i=nodes.length;
if(i>0){
while(i--){
if(nodes[i].tagName.toLowerCase()=="script" && nodes[i].getAttribute("type")=="text/html"){
// 模版id
this.template = nodes[i].innerHTML;
break;
}
}
}
this.render()
}
// 渲染模版
render(data?): void {
if (data) {
this.data = data;
}
// 解析模版
if(!this.renderFn){
this.renderFn= template.compile(this.template);
}
const source = this.renderFn(this.data);
// 更新容器的值
document.querySelector(this.el).innerHTML = source;
}
setData(value: any): void {
this.data=value;
this.render();
}
// 重新设置模板
setTemplate(value: any): void {
this.template = value;
this.renderFn= template.compile(value);
this.render();
}
// 获取数据
getData(): object {
return this.data;
}
}
编译后的JavaScript代码：
var TmpBind = /** @class */ (function () {
// 构造函数
function TmpBind(config) {
// 绑定的容器id
this.el = config.el;
// 注入的数据
this.data = config.data;
this.renderFn = null;
var nodes = document.querySelector(config.el).children;
var i = nodes.length;
if (i > 0) {
while (i--) {
if (nodes[i].tagName.toLowerCase() == "script" && nodes[i].getAttribute("type") == "text/html") {
// 模版id
this.template = nodes[i].innerHTML;
break;
}
}
}
this.render();
}
// 渲染模版
TmpBind.prototype.render = function (data) {
if (data) {
this.data = data;
}
// 解析模版
if (!this.renderFn) {
this.renderFn = template.compile(this.template);
}
var source = this.renderFn(this.data);
// 更新容器的值
document.querySelector(this.el).innerHTML = source;
};
TmpBind.prototype.setData = function (value) {
this.data = value;
this.render();
};
// 重新设置模板
TmpBind.prototype.setTemplate = function (value) {
this.template = value;
this.renderFn = template.compile(value);
this.render();
};
// 获取数据
TmpBind.prototype.getData = function () {
return this.data;
};
return TmpBind;
}());
因为是基于art-template/lib/template-web.js 请下载并引用一下。https://github.com/aui/art-template
实用示例：
<button id="button1">设置新值</button>
<button id="button2">获取值</button>
<div id="div1">
<script type="text/html">
{{msg}}
<div>
<img src="{{url}}"/>
</div>
<ul>
{{each list as item i}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
</div>
var vm = new TmpBind({
el: "#div1",
data: {msg: "欢迎来到模版绑定的世界", list: ['1', 2, 3, 4, 5], url: "https://www.baidu.com/img/bd_logo1.png"}
});
// 设置值
document.querySelector("#button1").addEventListener("click", function (evt) {
var data = vm.getData()
data.msg="欢迎来到模版绑定的世界222222222";
vm.setData(data);
})
// 获取值
document.querySelector("#button2").addEventListener("click", function (evt) {
alert(JSON.stringify(vm.getData()))
})
实现效果如下：
如果这篇文章对您有帮助，您可以打赏我
技术交流QQ群：15129679
最新文章
- 每天多一点（2016.12.04）》Javascript隐式转换
- P问题、NP问题、NPC问题、NP难问题的概念
- 【读书笔记】读《JavaScript高级程序设计-第2版》 - 函数部分
- Elasticseach部分语法总结
- lintcode：两数组的交 II
- hdoj 5335 Walk Out
- javascript新的原生态API
- select option 下拉多选单选bootstrap插件使用总结
- 一条sql语句引发mysql不停创建临时表的问题解决..coping to tmp table on desk
- SQL发音考（搜寻SQL-86标准）
- Linux之grep命令
- js中split()方法得到的数组长度
- RabbitMQ在分布式系统中的应用
- 【iCore4 双核心板_ARM】例程十五：USB_CDC实验——高速数据传输
- 从 bootup.js 学习加载脚本等资源
- NLP-训练个model出来写诗
- 关于分布式锁Java常用技术方案
- javascript创建对象之构造函数模式(二)
- 【原创】asp.net内部原理（三） 第三个版本 (最详细的版本)
- tensorflow 卷积神经网络基本参数()