标签：function listHelper return handlebars Handlebars 模版 field var 提个醒
<html>
<body onl oad="renderHello()">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Handlebars <b>{{doesWhat}}</b> <br>
{{loudHelper doesWhat}} <br>
{{{timeHelper time}}} <br>
{{time}} <br>
{{{listHelper names}}} <br>
{{#listHelper names}}
<b>{{firstName}}</b>
{{/listHelper}}
</script>
<br>
<br>
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>
<script>
function toDateString(values,field){
if (!field || !values){
return "";
}
field = field.trim();
var value = values[field];
if (!value){
return "";
}
var d = new Date(value);
return d.toDateString();
}
var tableColumns = [
{
title:"xxNo",
cell:"Handlebars: <div data-click='emit:aaa:aaa' href='/sss/sdsds'>xxNo: {{xxNo}}</div><div>yyNo: {{yyNo}}</div><div>日期: {{{timeHelper time}}}</div>",
}
];
function renderHello() {
var template = document.getElementById('template').innerHTML;
var compiled = Handlebars.compile(template);
Handlebars.registerHelper('loudHelper', function (aString) {
return aString.toUpperCase()
})
Handlebars.registerHelper('timeHelper', function (t) {
return new Date(t).toDateString();
})
Handlebars.registerHelper("listHelper", function(items, options) {
const itemsAsHtml = items.map(item => {
let s = item;
if (typeof options.fn === "function"){
const s1 = options.fn(item).trim();
if (s1.length > 0){
s = s1;
}
}
return "<li>" + s + "</li>"
});
return "<ul>\n" + itemsAsHtml.join("\n") + "\n</ul>";
});
document.getElementById('target').innerHTML = compiled({
doesWhat: "rocks!",
time: Date.now(),
names: [
"bbb",
{firstName:'fff'}
]
});
}
</script>
</body>
</html>
标签：function,
listHelper,
return,
handlebars,
Handlebars,
模版,
field,
var,
提个醒
From： https://www.cnblogs.com/lhp2012/p/16717738.html