underscore模版使用

    <script  id="compiled" type="text/template">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <h3 class="userTitle">{{title}}</h3>
            <div class="grid">
                <div class="gridLeft col-md-5 col-sm-5 col-xs-5">
                    <h4>监测点数量：<strong> {{one}}</strong><span>个</span></h4>
                    <h4>正常运行：<strong> {{two}}</strong><span>个</span></h4>
                    <h4>未运行：<strong> {{three}} </strong><span>个</span></h4>
                </div>
                <div class="gridRight col-md-7 col-sm-7 col-xs-7">
                    <h4>当月总能耗：<strong> {{four}} </strong><span>个</span></h4>
                    <h4>上月总能耗：<strong> {{five}} </strong><span>个</span></h4>
                    <h4>上月平均负荷率：<strong> {{six}} </strong><span>个</span></h4>
                </div>
                <p>{{article}}</p>
                <div class="clearfix"></div>
            </div>
        </div>
    </script>

    <script src="${path}/js/underscore/underscore-min.js"></script>
    <script>
	    _.templateSettings = {
	  		interpolate : /\{\{(.+?)\}\}/g
	  	};
	    var data = 
    	[
    		{"title":"123司","one":"1","two":"1","three":"0","four":"0","five":"0","six":"8.88","article":"告警数据",},{"title":"456","one":"1","two":"1","three":"0","four":"0","five":"0","six":"8.88","article":"告警数据",},{"title":"789","one":"1","two":"1","three":"0","four":"0","five":"0","six":"8.88","article":"告警数据",},{"title":"asd","one":"1","two":"1","three":"0","four":"0","five":"0","six":"8.88","article":"告警数据",},{"title":"zxc","one":"1","two":"1","three":"0","four":"0","five":"0","six":"8.88","article":"告警数据",},{"title":"bnm","one":"1","two":"1","three":"0","four":"0","five":"0","six":"8.88","article":"告警数据",}
    	];
    	var compiled = _.template($("#compiled").html());
    	for(var i = 0; i < data.length; i++){
    		var compiledStr = compiled(data[i]);
    		$("#main").append($.parseHTML(compiledStr));
		}
    </script>

 

转载于:https://my.oschina.net/u/2999760/blog/859024