利用art.template模仿VUE 一次渲染多个模版

TypeScript代码

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

    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