Cou*_*lin 6 jquery mustache handlebars.js
我在这里使用这些数据:http://pastie.org/3231052 - 如何使用Mustache或Handlebars显示密钥而不是值?
[{"interval":"2012-01-21",
"advertiser":"Advertisers 1",
"offer":"Life Insurance",
"cost_type":"CPA",
"revenue_type":"CPA",
... etc ...
}]
Run Code Online (Sandbox Code Playgroud)
如果你想显示键值对,你可以在Handlebars中编写一个helper。
Handlebars.registerHelper('eachkeys', function(context, options) {
var fn = options.fn, inverse = options.inverse;
var ret = "";
var empty = true;
for (key in context) { empty = false; break; }
if (!empty) {
for (key in context) {
ret = ret + fn({ 'key': key, 'value': context[key]});
}
} else {
ret = inverse(this);
}
return ret;
});
$(function() {
var data = {"interval":"2012-01-21",
"advertiser":"Advertisers 1",
"offer":"Life Insurance",
"cost_type":"CPA",
"revenue_type":"CPA"};
var source = $("#template").html();
var template = Handlebars.compile(source);
$('#content').html(template({'data': data}));
});
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta2/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">
{{#eachkeys data}}
<li>{{this.key}} - {{this.value}}</li>
{{/eachkeys}}
</script>
<div id="content">
</div>
Run Code Online (Sandbox Code Playgroud)
编辑
看起来这并不完全是您想要的,但是可以想出一个可以完成此任务的助手。
归档时间: |
|
查看次数: |
9387 次 |
最近记录: |