[英]Accessing data in handlebars.js template
我具有以下JSON数据集,并希望遍历users
并为他们可以访问的每个apps
提供一个链接。 我已经成功地遍历了用户数组,并从每个用户所包含的应用程序数组中呈现了每个应用程序的名称。 但是,我不知道如何从apps数组中查找app的URL。 这可以在Handlebars.js模板中完成吗?
{ "config": {
"users":
[
{
"name": "Bob Jones",
"title": "Developer",
"apps": ["app1","app2","app4"]
},
{
"name": "Brad Willis",
"title": "Manager",
"apps": ["app2","app4"]
}
],
"apps":
[
{
"name": "app1",
"url": "http://host/app1"
},
{
"name": "app1",
"url": "http://host/app1"
},
{
"name": "app1",
"url": "http://host/app1"
},
{
"name": "app1",
"url": "http://host/app1"
}
]
}
}
这是我当前用于显示用户和应用程序的模板:
{{#each config.users}}
<div class="user-panel">
<div class="user-panel-name">{{this.name}}</div>
<div class="user-panel-title">{{this.title}}</div>
<div class="user-panel-apps">
{{#each this.apps}}
<a class="btn btn-success btn-sm" onclick="DoLogin('APP URL GOES HERE');">{{this.name}}</a>
{{/each}}
</div>
</div>
{{/each}}
{{#each this.apps}} <a class="btn btn-success btn-sm" onclick="DoLogin('{{this.url}}');">{{this.name}}</a> {{/each}}
注册一个helper
以获取特定应用程序的URL。
模板:
{{#each config.users}}
<div class="user-panel">
<div class="user-panel-name">{{this.name}}</div>
<div class="user-panel-title">{{this.title}}</div>
<div class="user-panel-apps">
{{#each this.apps}}
<a class="btn btn-success btn-sm" onclick="DoLogin('{{url this}}');">{{this}}</a>
^^^^^^^^
{{/each}}
</div>
</div>
{{/each}}
脚本:
var val = {
"config": {
"users": [
{
"name": "Bob Jones",
"title": "Developer",
"apps": ["app1", "app2", "app4"]
},
{
"name": "Brad Willis",
"title": "Manager",
"apps": ["app2", "app4"]
}
],
"apps": [
{
"name": "app1",
"url": "http://host/app1"
},
{
"name": "app1",
"url": "http://host/app1"
},
{
"name": "app1",
"url": "http://host/app1"
},
{
"name": "app1",
"url": "http://host/app1"
}
]
}
};
Handlebars.registerHelper('url', function (app) {
for (var i = 0, len = val.config.apps.length; i < len; i++) {
if (app == val.config.apps[i].name) {
return val.config.apps[i].url;
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.