[英]Handlebars condition based on lookup
I have the following data structure: 我有以下数据结构:
{
things: [
"desk",
"chair",
"pen",
"book",
"lamp"
],
owners: [
"Julia",
"Sandra",
"John",
"Paul"
]
}
What's working: 工作原理:
This handleblars
template: 此
handleblars
模板:
{{#each things}}
<p>This {{this}} belongs to {{lookup ../owners @index}}</p>
{{/each}}
Correctly outputs: 正确输出:
This desk belongs to Julia
This chair belongs to Sandra
This pen belongs to John
This book belongs to Paul
This lamp belongs to
What's not working: 什么不起作用:
Now, I'd like to add a condition because the last thing
might not have an owner
. 现在,我想添加一个条件,因为最后一
thing
可能没有owner
。 The template would then look something like: 模板将如下所示:
{{#each things}}
{{#if lookup ../owners @index}}
<p>This {{this}} belongs to {{lookup ../owners @index}}</p>
{{else}}
<p>...But this {{this}} belongs to nobody</p>
{{/if}}
{{/each}}
And the ouput: 输出:
This desk belongs to Julia
This chair belongs to Sandra
This pen belongs to John
This book belongs to Paul
...But this lamp belongs to nobody
Unfortunately, this {{#if lookup ../owners @index}}
thing doesn't work. 不幸的是,此
{{#if lookup ../owners @index}}
无效。
My question: is it possible to achieve this with built-in Handlebars helpers, or do I have to write a custom helper? 我的问题:是否可以使用内置的Handlebars帮助器来实现,还是必须编写自定义帮助器?
You can indeed do just what you're trying to do, using subexpressions: 实际上,您可以使用子表达式执行您想做的事情:
{{#if (lookup ../owners @index)}}
works like a charm. 奇迹般有效。 (source: Handlebars website )
(来源: Handlebars网站 )
I think it will be better if you were to change your data structure, for instance like this: 我认为如果更改数据结构会更好,例如:
[
{
thing: "desk",
owner: "Julia"
},
{
thing: "chair",
owner:"Sandra"
},
{
thing: "pen",
owner: "John"},
{
thing: "book",
owner: "Paul"},
{
thing: "lamp"
}
]
then your handlebar template will look like 那么您的车把模板将看起来像
{{#each this}}
{{#if this.owner}}
<p>This {{this.thing}} belongs to {{ this.owner}}</p>
{{else}}
<p>...But this {{this.thing}} belongs to nobody</p>
{{/if}}
{{/each}}
this will output (I ran it on http://tryhandlebarsjs.com/ ) 这将输出(我在http://tryhandlebarsjs.com/上运行了它)
<p>This desk belongs to Julia</p>
<p>This chair belongs to Sandra</p>
<p>This pen belongs to John</p>
<p>This book belongs to Paul</p>
<p>...But this lamp belongs to nobody</p>
Using handlebars helpers may look good to you, but moving logic from handlebars to javascript will be better in long run. 使用车把帮手对您来说看起来不错,但从长远来看,将逻辑从车把移到javascript 会更好。
I believe the answer is a 'no' if you want to nest Handlebars lookup
with an if
. 我相信,如果您想将Handlebars
lookup
与if
嵌套在一起,答案是“否”。
But here, if you want to omit the last thing
(or n things) which don't have an owner
, you may reverse check the #each
like below, 但在这里,如果你想省略最后的
thing
(或n东西),它不具有owner
,您可以反向检查#each
像下面,
{{#each owners}}
<p>This {{lookup ../things @index}} belongs to {{this}}</p>
{{/each}}
Which outputs, 哪个输出,
<p>This desk belongs to Julia</p>
<p>This chair belongs to Sandra</p>
<p>This pen belongs to John</p>
<p>This book belongs to Paul</p>
Hope this helps. 希望这可以帮助。
I have found an alternate solution by writing a custom helper, isIndexExist
. 我通过编写自定义帮助程序
isIndexExist
找到了另一种解决方案。
Handlebars.registerHelper("isIndexExist", function(array, value, options) {
return value < array.length ? options.fn(this) : options.inverse(this);
});
And in the template, you can write, 在模板中,您可以编写
{{#each things}}
{{#isIndexExist ../owners @index}}
<p>This {{this}} belongs to {{lookup ../owners @index}}</p>
{{else}}
<p>...But this {{this}} belongs to nobody</p>
{{/isIndexExist}}
{{/each}}
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.