These are all objects which I am passing to the handlebars template.
self.template = template({ data: self.model, lang:self.lang, page:self.mainPage, subpage:self.param });
Then inside foreach loop I have an if statement where I am not able to access the parent context element. The code which i have inside the template and the problem is shown bellow:
{{#each data}}
<h1>{{../subpage}}</h1> --> This is giving me a subpage value
{{#if this.brand}}
{{#if ../subpage}}
<h1>WHY IS THIS NOT SHOWING?</h1> --> This is what i am trying to achieve
{{/if}}
{{/if}}
{{/each}}
Any ideas how to achieve this? Thank you very much for all answers/comments!
{{#if this.brand}} goes down into context another level, so you must escape to the parent context not once, but twice.
Your template should thus be:
{{#each data}}
<h1>{{../subpage}}</h1>
{{#if this.brand}}
{{#if ../../subpage}}
<h1>This shows now!</h1>
{{/if}}
{{/if}}
{{/each}}
This should work with a self.model value similar to:
[
{
brand: "Brand A",
otherFields: "here"
}
]
Here is a jsFiddle that demonstrates the solution: nested if statement context escaping
I hope that helps!
Related
I would like to use to refer to another template within an {{#each}} loop
html:
{{#each listOfItems}}
{{>{{variableOne}}}}
{{/each}}
which should render
<Template name="one">
One
</Template>
or
<Template name="two">
Two
</Template>
depending on the js
other tried syntax include
{{>'{{variableOne}}'}}
or
{{>Template.dynamic template={{variableOne}}}}
Any help or workaround greatly appreciated!
Not sure what are you trying to accomplish. I'm assuming you are using Blaze rendering engine. If you want to pass parameters try this:
{{#each}}
{{> TemplateName variable=variable}}
{{/each}}
Or if you want to show certain template depending on variable value try this (watch out - eq is meant as global helper for comparing values):
{{#each}}
{{#if variable eq 1}}
{{> TemplateOne}}
{{else}}
{{> TemplateTwo}}
{{/if}}
{{/each}}
Assuming that the list you iterate over contains the template names, this will get you what you want:
html:
<template name="hello">
{{#each template in myTemplates}}
{{> Template.dynamic template=template }}
{{/each}}
</template>
<template name='foo'>foo-template</template>
<template name='bar'>bar-template</template>
js:
Template.hello.helpers({
myTemplates() {
return ['foo', 'bar'];
},
});
Context
I’m trying to use Handlebars to loop through events and then nested loop through images. I need to select only the images that correspond to the event that the event loop is currently on.
Problem
I can’t pass the _id of the event inside the image nested. Is there a work-around for this? I realize I can pass variables through a helper but it would be good to know if there is a simpler way.
The following is meta-code for what is not working so far:
//attach venue image to each venue
{{#each myVenues}}
{{#each myImages}}
{{#if myVenues._id == myImages._id}}
<img src="{{this.url}}>
{{/if}}
{{/each}}
{{/each}}
Any help would be appreciated!
More recent versions of spacebars supports referencing the parent. Try:
{{#each myVenues}}
{{#each myImages}}
{{#if ../_id == myImages._id}}
<img src="{{this.url}}>
{{/if}}
{{/each}}
{{/each}}
EDIT:
Christian Fritz pointed out that your conditional logic in the if statement won't work with spacebars. If you set up a helper to evaluate the conditional logic, you can still get this working:
{{#each myVenues}}
{{#each myImages}}
{{ifequals ../_id myImages._id}}
<img src="{{this.url}}>
{{/if}}
{{/each}}
{{/each}}
Then in a helper:
Template.registerHelper('ifequals', function(a,b) {
return a === b;
});
Is it possible to only display surrounding HTML around a Handlebar (or Mustache) variable if it is not empty (or not null, etc)? For instance, given the following context and template:
var data = {field1:123,field2:123,field3:'',field4:123};
<dl>
<dt>field1:</dt><dd>{{field1}}</dd>
<dt>field2:</dt><dd>{{field2}}</dd>
<dt>field3:</dt><dd>{{field3}}</dd>
<dt>field4:</dt><dd>{{field4}}</dd>
</dl>
The following would be displayed:
field1:123
field2:123
field4:123
Rather writing if block for each field you can use the each block helper
<dl>
{{#each this}}
{{#if this}}
<dt>{{#key}}</dt><dd>{{this}}</dd>
{{/if}}
{{/each}}
</dl>
Here you are traversing through the object and checking if the current field is set then display the key and value otherwise move to the next field. It can help you if you have a large set of data then you don't need to write the if block again and again.Hope this helps.
Working example can be found here : http://jsfiddle.net/prabhat_rai/rveap9jb/
The simplest way would be to use the if statement:
<dl>
{{#if field1}}
<dt>field1:</dt><dd>{{field1}}</dd>
{{/if}}
{{#if field2}}
<dt>field2:</dt><dd>{{field2}}</dd>
{{/if}}
...
</dl>
I've searched and searched and I cannot find the solution to the following question:
How do you access a parent inside an each loop?
So here's the scenario, I need to pass an id of the parent with the action helper within a nested each loop.
{{#each}} {{! iterating the model here (arrayController) }}
{{#if showingApplicants}} {{! this is set by a button that changes a property inside this particular model object}}
{{#each applicants}}
<button {{action addLabel _id}}>Add Label...</button>
{{/each}}
{{/if}}
{{/each}}
I have tried doing ../_id and ../../_id. Both of which represent an undefined value. Any clues? ALSO: Is it possible to pass two values in the action helper?
You can create variables on your #each blocks so you can refer to them on any context
{{#each x in content}}
{{#if x.showingApplicants}}
{{#each applicant in x.applicants}}
<button {{action addLabel x.id}}>Add Label...</button>
{{this.controllerProperty}}
{{x.parentModelProperty}}
{{y.childModelProperty}}
{{/each}}
{{/if}}
{{/each}}
You could also not name applicant, but if you start by naming the outer context, I would suggest doing it for the nested each as well for consistency and to avoid possible name clashes (between the outer variable and child properties).
Hope this helps
The workaround for this issue was to map out the model data to have an id object that contained the parent id and the child id.
I have a machine_list_item.html template which contains this piece of code:
{{#if view.machine.isGhost}}
<div class="remove-machine-key-association">
<button {{action "aloha" target="view"}}></button>
</div>
{{/if}}
And I have this function inside machine_list_item.js view:
aloha: function() {
alert('Tadah!');
}
The button won't call the function and will give this error:
Error: assertion failed: The action 'aloha' did not exist on Mist.MachineListItemView
However, if I comment out the handlebar's {{#if}} structure, the code will work just fine.
Any help will be appreciated!
Using {{#linkTo}} ... {{/linkTo}} implicitly creates a view. Many handlebars blocks do this. So anything inside the ... that refers to view is actually referring to the LinkToView.
To fix this, rename your view using {{#with ... as ...}} so that it doesn't get shadowed.
{{#with view as myView}}
{{#linkTo 'machine' myView.machine}}
{{#if myView.machine.isGhost}}
<div class="remove-machine-key-association">
<button {{action "aloha" target=myView}}></button>
</div>
{{/if}}
{{/linkTo}}
{{/with}}
See this question for more details.
I guess you have somewhere else a problem, here a simple example how it works correctly: http://jsbin.com/IhojaYE/2/edit
Hope it helps.