I'm new to Handlebars and I wanted to know if I can use block helper inside a block helper, something like this:
{{#each person}}
{{each family_member}}{{family_relation}}
{{/family_member}}
{{/person}}
I've tried to do it with a simple helpers in http://tryhandlebarsjs.com
and it didn't work, but I couldn't find any place saying if it can work or not....
any help?
Thanks
You can use block helpers inside block helpers. Provided they are used the correct way.
{{#each person}}
{{#each family_member}}
{{family_relation}}
{{/each}}
{{/each}}
You can actually see a plunkr here : http://plnkr.co/edit/H9XlaQG99etHb4Fwx9pp?p=preview
Related
When there is a link present, we want something like this HTML:
<img src="{{src}}"></img>
When there is no link present, we want something like this HTML:
<img src="{{src}}"></img>
Is there a clean way to do this? I consider the following solution bad, because it's dangerous to have to separately remember to open and close the <a> tag:
{{#if url}}<a href="{{url}}" title="{{title}}" target="_blank">{{/if}}
<img src="{{src}}">
{{#if url}}</a>{{/if}}
I considered using a block helper, but can't think of how to do so without adding more complexity. Maybe something like:
{{#linkWrap url}}<img src="{{src}}">{{/linkWrap}}
But then it's hard to see how we set the title and target and everything gets awkward.
I think you are on the right track, but I would recommend using a Handlebars Partial Block instead of a Block Helper. This will allow to pass one piece of template (the block) to another piece of template by which it will be wrapped (the partial).
Handlebars provides us with {{> #partial-block }} as a way to render a block of template within a partial. We can use this to create our "linkWrap" partial:
{{#if link}}
<a href="{{link.url}}" target="{{link.target}}" title="{{link.title}}">
{{> #partial-block}}
</a>
{{else}}
{{> #partial-block}}
{{/if}}
This gives us a clean and simple partial that will allow us to wrap any section of our template with a link as long as we have a link object to pass to our partial. Note that I have opted to use an object to represent the link so that I can pass a single parameter to the partial instead of passing the url, title, etc. properties individually.
For anywhere we wish to render a link around some markup in our template, we can do so in the following way:
{{#> linkWrap link=link}}
<img src="{{image.src}}">
{{/linkWrap}}
If the link object is null or undefined, the img element will be rendered without a parent anchor element.
I have created a supplementary fiddle for reference.
Just started using Meteor so I might be missing something basic. In Meteor 1.2 they have the {{#index}} directive.
In a template if I have:
...
{{#each items}}
{{#index}}
{{> childTemplate}}
{{/each}}
...
<template name="childTemplate">
{{#index}}
</template>
The #index in the main template will work, but the one in the childTemplate won't. The work around I've done to use it is to call the childTemplate passing in #index:
{{> childTemplate #index=#index}}
Is this the correct way to do it? Or is there something more meteory?
Yes, that's fine
There's a similar question I answered here :-
How to get the #index of nested #each in meteor
But in this case passing it in is good.
Meteor has "../var" to get to the parent context, but that is the template context, not the each block, so I don't think there is a more meteory way
I am new to Meteor and got stuck here.
<h1>{{otherObj.category}}</h1>
{{#each partners}}
<p>{{name}} - {{otherObj.category}}</p>
{{/each}}
In this template snippet, otherObj is the object that i want to access in the loop. So this outputs
<h1>football</h1>
<p>Name1 - </p>
<p>Name2 - </p>
Further investigation revealed that OtherObj inside the loop is 'undefined'
Any idea, how can i access it inside the loop ?
You need access to parent properties of each loop.
Use ../ like this :
<h1>{{otherObj.category}}</h1>
{{#each partners}}
<p>{{name}} - {{../otherObj.category}}</p>
{{/each}}
It is very useful to use template.find to locate DOM elements inside a specific template instance. But what happens when the template iterates {{#each}} over some tags without using a sub-template?
<template name="top">
{{#each items}}
<img src="{{src}}">
Click me
{{/each}}
</template>
Tempalte.events(
'click a': (event, template) ->
template.find('img') # This doesn't do the trick
# Is there a better way?
)
Is there a way to easily access the img element associated with the click event?
I know I can use event.target or create another template an use it inside the {{#each}} block. I wonder if there is a better/shorter way to do it.
You could add an #index to the img to make it possible to select it (using js or CSS). How to get index in Handlebars each helper?
Is there a variable passed into every handlebar.js template that contains all the context content that is accessible by the template?
e.g. I'm creating a template, but I don't know all the context content accessible by the template. I want to be able to type into the template {{ debug }} and handlebars.js will spit out all the context content into the HTML
You can use the following code to iterate through this object:
{{#each this}}
{{#key}}: {{this}}
{{/each}}
or a similar piece of code iterating through #root object:
{{#each #root}}
{{#key}}: {{this}}
{{/each}}
Handlebars has built-in helper log.
You just need to set logging level to DEBUG.
Handlebars.logger.level = 0;
Then use helper:
{{log this}}
EDIT: Sorry, this will not write context to HTML, helper uses console.log. For outputting to HTML you need to write custom helper that will use for example JSON.stringify.
Though this question is somewhat old, someone might find this usefull. You can just dump the handlebars current context into plain text with;
{{{.}}}