underscore模版使用
程序员文章站
2022-06-03 12:26:52
...
<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
推荐阅读
-
省点花锦鲤卡app怎么激活 省点花锦鲤卡激活后怎么使用
-
Android自定义View 使用PathMeasure简单模仿系统ProgressBar(四)
-
solidworks零件模型怎么使用剖面命令?
-
Android studio怎么使用git获取最新内容然后合并?
-
省点花锦鲤卡可以在美团上使用吗 省点花锦鲤卡app怎么在美团上用
-
Wing FTP Server FTP服务器端中文版安装使用教程
-
eclipse格式化代码快捷键无法使用怎么办?
-
android使用DataBinding来设置空状态
-
IDPhotoStudio证件照打印使用教程
-
百中搜优化软件怎么样?百中搜优化软件使用教程(附视频教程)