使用handlebars.js和Behance API - {{user.sections.[availability]}}
输出 - Full-Time, Contract, Relocation
。
我想将每个逗号分隔的单词输出作为其项目,类似于以下内容:
<ul>
<li>Full-Time</li>
<li>Contract</li>
<li>Relocation</li>
</ul>
这会包含一些Javascript或#each语句吗?如果是这样,有人可以指导我寻求有用的解决方案或片段吗?
对于那些要求......这是我当前的javascript代码和HTML。
(function() {
var behanceUserAPI = 'http://www.behance.net/v2/users/' + userID + '?callback=?&api_key=' + apiKey;
function setUserTemplate() {
var userData = JSON.parse(sessionStorage.getItem('behanceUser')),
getTemplate = $('#user').html(),
template = Handlebars.compile(getTemplate),
result = template(userData);
$('body').html(result);
// AUTO-TIME GREETING + COPYRIGHT -----------------------------------------
var date = new Date();
var time = date.getHours();
var greeting = "";
if (time < 12) {
greeting = "Morning";
} else if ((time >= 12) && (time < 19)) {
greeting = "Howdy";
} else {
greeting = "Evening";
}
document.getElementById("greeting").innerHTML = greeting;
document.getElementById("auto-year").innerHTML = "Copyright © " + date.getFullYear();
}
if (sessionStorage.getItem('behanceUser')) {
setUserTemplate();
} else {
$.getJSON(behanceUserAPI, function(user) {
var data = JSON.stringify(user);
sessionStorage.setItem('behanceUser', data);
setUserTemplate();
});
}
})();
<ul class="availability">
{{#splitSTring user.sections.[Availability] delimiter=", "}}
<li><i class="icon-check twentytwo color"></i><span>{{this}}</span> </li>
{{/splitString}}
</ul>
答案 0 :(得分:1)
编辑以了解实际问题:
你想要把这个字段变成一个数组。像
这样的东西var availabilities = user.sections.availability.split(',');
//send availabilities to template
然后在您的模板中,您可以将其打印为:
{{#each availabilities as |time|}}
<li>{{time}}</li>
{{/each}}
或者@isherwood建议你可以注册一个HandleBars助手为你做这个。
答案 1 :(得分:1)
注册帮助程序并将逗号空间指定为分隔符。
Handlebars.registerHelper("splitString", function(options){
var ret = "";
var tempArr = context.trim().split(options.hash["delimiter"]);
for(var i=0; i < tempArr.length; i++)
{
ret = ret + options.fn(tempArr[i]);
}
return ret;
});
<ul>
{{#splitSTring user.sections.[availability] delimiter=", "}}
<li>{{this}}</li>
{{/splitString}}
</ul>
<强> More 强>
请注意,这是一个不完整的例子。我试图将其翻译成您的代码,但我并不是全部。我建议先从链接的示例开始。