利用art.template模仿VUE

冷不防 2021-12-23 13:59 380阅读 0赞

首先先看一下Typescript代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

因为是基于art-template/lib/template-web.js 请下载并引用一下。[https://github.com/aui/art-template][https_github.com_aui_art-template]

实用示例：

**实现效果如下：**

![341068-20190508093535392-912474201.png][]

*如果这篇文章对您有帮助，您可以打赏我*

*![341068-20180422222739092-1485869140.jpg][]*

**技术交流QQ群：15129679**

转载于:https://www.cnblogs.com/yeminglong/p/10827058.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211223/298a7b1ab7504a6da9897f3a3999a79f.png
[https_github.com_aui_art-template]: https://github.com/aui/art-template
[341068-20190508093535392-912474201.png]: /images/20211223/51ca6f4e885c4e07895733e58835b3dd.png
[341068-20180422222739092-1485869140.jpg]: /images/20211223/ed90d97f1af649468630ce1775187a46.png