首页 > Web开发 > 详细

js模板引擎实例一

时间:2017-10-19 13:35:30      阅读:273      评论:0      收藏:0      [点我收藏+]
   <div class="header"></div>
<!--    模板-->
    <script type="template" id="template">
        <h2>
            <a href="{{href}}">{{Title}}</a>
        </h2>
        <img src="{{imgSrc}}" width="300">
    </script>
//        数据
        var data = [{
            Title: "百度一下",
            href: "http://www.baidu.com",
            imgSrc: "1.jpg"
        }];
var template = document.querySelector(‘#template‘).innerHTML,
            header = document.querySelector(‘.header‘),
            fragment = ‘‘;
        for (var i = 0, len = data.length; i < len; i++) {
            fragment += template
                .replace(/\{\{Title\}\}/, data[i].Title)
                .replace(/\{\{href\}\}/, data[i].href)
                .replace(/\{\{imgSrc\}\}/, data[i].imgSrc)
        }
        header.innerHTML=fragment;

 

js模板引擎实例一

原文:http://www.cnblogs.com/caoruichun/p/7691789.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!