利用art.template模仿VUE 一次渲染多个模版
TypeScript代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import template = require('art-template/lib/template-web'); interface TemplateBindConfig { el: string data: object } interface TemplateList { els: object template: string } 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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var TemplateList = /** @class */ (function () { function TemplateList() { } return TemplateList; }()); var TmpBind = /** @class */ (function () { // 构造函数 function TmpBind(config) { // 绑定的容器id this.el = config.el; // 注入的数据 this.data = config.data; this.template = new Array(); var nodes = document.querySelector(config.el).children; TmpBind.getTemplates(nodes, this); this.render(); } TmpBind.getTemplates = function (nodes, instance) { var i = nodes.length; if (i > 0) { while (i--) { if (nodes[i].tagName.toLowerCase() == "script" && nodes[i].getAttribute("type") == "text/html") { // 模版id var ts = new TemplateList(); ts.el = nodes[i]; ts.template = nodes[i].innerHTML; ts.renderFn = template.compile(ts.template); ts.source = ts.renderFn(instance.data); ts.els = new Array(); instance.template.push(ts); } if (nodes[i].children && nodes[i].children.length > 0) { TmpBind.getTemplates(nodes[i].children, instance); } } } }; // 渲染模版 TmpBind.prototype.render = function (data) { this.reset(); if (data) { this.data = data; } for (var i = 0; i < this.template.length; i++) { var div1 = document.createElement("div"); this.template[i].source = this.template[i].renderFn(this.data); div1.innerHTML = this.template[i].source; this.template[i].els = new Array(); while (div1.childNodes.length > 0) { this.template[i].els.push(div1.childNodes[0]); this.template[i].el.parentNode.insertBefore(div1.childNodes[0], this.template[i].el); } } document.querySelector(this.el).template = this.template; }; // 重置 TmpBind.prototype.reset = function () { var template = document.querySelector(this.el).template; if (template) { for (var i = 0; i < template.length; i++) { if (template[i].els && template[i].els.length > 0) { var j = template[i].els.length; while (j--) { template[i].els[j].parentNode.removeChild(template[i].els[j]); } } } } }; // 设置数据 TmpBind.prototype.setData = function (value) { this.data = value; this.render(); }; // 获取数据 TmpBind.prototype.getData = function () { return this.data; }; return TmpBind; }());
示例:
<div id="div2"> 这是第一个模版...... <script type="text/html"> <p>{{msg}}</p> <ul> {{each list as item}} <li>{{item}}</li> {{/each}} </ul> </script> 二个模版 <script type="text/html"> <ul> {{each list as item}} <li>{{item}}</li> {{/each}} </ul> </script> N个模版 <script type="text/html"> <ul> {{each list as item}} <li>{{item}}</li> {{/each}} </ul> </script> </div> <script> var vm = new TmpBind({ el: "#div2", data: { msg: "欢迎来到模版绑定的世界", list: [1, 2, 3, 4, 5, 6, 7, 8, 9] } }) // 获取数据 var data = vm.getData(); // 更改数据 data.msg = "欢迎来到模版绑定的世界3333333333" data.list.push(333) setTimeout(function () { // 设置数据 vm.setData(data) }, 3000) </script>
如果这篇文章对您有帮助,您可以打赏我
技术交流QQ群:15129679