mustache.js 使用
Posted 一线蓝光
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mustache.js 使用相关的知识,希望对你有一定的参考价值。
对于mustache模板,我是属于即用即查的方法,以下记录仅是我常用的方式。方便以后使用时不用再去项目中去找,因为真的不好找。(此处 -->serious 脸)
当需要渲染一些数据列表的时候,使用这个模板是比较快捷的。(具体详情语法看文档)
一.首先需要添加html模板部分。
<script id="template" type="x-tmpl-mustache">
{{#data}} -->列表数据
//此处只是示例,换成需要循环的列表即可
<h3 class="order-num-box">订单号:<span class="order-num">{{payid}}(此处写数据循环列表中的变量名,为了绑定字段中的内容不需要被转义我们可以{{&payid}})</span>
<span class="item-time pull-right">下单时间:{{paytime}}</span>
</h3>
{{/data}}
</script>
二. 获取模板
var tmpl = $(‘#template‘).html();
三. 渲染模板
function showRecordData(data) {
Mustache.parse(tmpl);
var rendered = Mustache.render(tmpl, {
dataRecord: data, //数据源 --对象数组
render: function() { //如果有需要根据不同状态或者类型返回不同的值或者html片段时,可以通过函数来实现
if (this.type == 类型值) {
return "...." ;
} else {
return "...";
}
}
});
return rendered; //返回渲染好的html数据。
}
以上是关于mustache.js 使用的主要内容,如果未能解决你的问题,请参考以下文章