Develop Reference

{{#each}} makes handlebars template disappear

I have a template inside a script tag
<div class = "exhibitionDescription">
<h3>{{title}}</h3>
<p>{{infoText}}</p> </div>
and the browser renders it fine,
but when I surround it with {{#each arrayName}} {{/each}}
{{#each arrayName}}
<div class = "exhibitionDescription">
<h3>{{title}}</h3>
<p>{{infoText}}</p> </div>
{{/each}}
browser renders the script tag absolutely blank.
The handlebars library is included before the script tag
(here is a screenshot of the final browser output)
Here is the same code, but without the {{#each}} {{/each}} around the template
UPD! Turns out {{#each}} tag "cuts" everything it surrounds, including itself, which is not something is that supposed to happen...
UPD 2! I think i've got the problem - double curly brackets ({{ }}) just make the code in between disappear! Why tho?

I solved it - I was using handlebars to insert the templates themselves, that's why my curly braces were interpreted by handlebars as data inputs, and it just removed them when rendering!
Instead of
{{text}}
, I should have used the
\{{text}}
, which fixes the problem and makes it leave the curly braces alone.

Pass spacebar parameter to another spacebar parameter

Im trying to pass a parameter from one template to other in meteor.js
i want to do this for DRY sake
The first template looks like this
template(name="myPage")
h3.uppercase.amarillo-hogar
+editaMl(data=this collection="categorias" field="titulo")
template(name="editaMl")
if i18n_isCurrentLanguage 'es'
| {{collection}} {{field}}
+editableText(context=data collection=collection field=field userCanEdit=userCanEdit acceptEmpty=true substitute='<i class="fa fa-pencil"></i>')
else
+editableText(collection=collection field=field userCanEdit=userCanEdit acceptEmpty=true substitute='<i class="fa fa-pencil"></i>')
this is so i can stop repeating myself with every translation field
but cant work around passing a parameter value to another template parameter value
i use jade, now in html for those who do not like jade
<template name="myPage">
<h3 class="uppercase amarillo-hogar>{{> editaMl collection="categorias" field="titulo"}}</h3>
</template
<template name="editaMl">
{{#if i18n_isCurrentLanguage 'es'}}
{{> editableText collection=collection field=field }}
{{/if}}
{{#else}}
{{> editableText collection=collection field=field }}
{{/else}}
</template>
just if you want to know, im using babraham editable text package and tap_i18n with tap_i18n ui for translating
Cant find the reason my helper returns an object when used like this in the content {{collection}} but when used as parameter in the child template does nothing
Code updated and SOLVED

You can use:
Template.registerHelper('yourHelperName', function() {
// your helper
});
It creates a helper available in all templates.

Ember conditions in views

I have a simple blog in which I learn Ember.
Now I have a controller
App.IndexController = Ember.ArrayController.extend({
sortProperties: ['originalId:desc']
sortedPosts: Ember.computed.sort('model', 'sortProperties'),
})
So in template I show all posts. For this I want to show edit link near all of my posts.
So question is how to do this in handlebars.
I want to do something like this:
{{#each post in sortedPosts}}
<h1>{{link-to post.title 'post' post }}</h1>
{{#if session.isAuthenticated and post.ownedBy(session.user)}} <!--This place doesn't work-->
{{link-to 'Edit' 'post.edit' post }}
{{/if}}
{{{post.text}}}
<hr/>
{{/each}}
I found this question Logical operator in a handlebars.js {{#if}} conditional but I hope that there is better solution.
P.S.: There is one more question about sorting with SortableMixin. It doesn't reload templates when sortProperties is changed. So I have to create one more property sortedPosts. Maybe someone knows why it doesn't work?

You will need to create a computed property in the controller and then use it in the view. If you have 2 computed properties and want to combine them into a 3rd - you can use computed.and (see here)

I want Handlebar {{#if}} logic inside of a Ember.Handlebars.helper

I am converting someone else's code to Handlebars.js and I'm stuck on converting this tag to its {{#handle-bar}}{{/handle-bar}} counterpart.
The previous coder used an {{#ifCond}} to toggle what 'selected'. This is my component.
{{#dropdown-item }}
{{unbound this.itemName}}
{{/dropdown-item}}
Here is the div i want converted to my component
<div class="dropdownItem" {{bind-attr value=formField_DropdownItemID}}{{#ifCond formField_DropdownItemID value}} selected{{/ifCond}} >
{{unbound this.itemName}}
</div>
My first thought was to just pop the div's logic into the the component, like the next example, but this gave me an error.
{{#dropdown-item bind-attr value=formField_DropdownItemID {{#ifCond formField_DropdownItemID value}} selected{{/ifCond}} }}
{{unbound this.itemName}}
{{/dropdown-item}}
Any suggestions?

You can set those properties to compute. The syntax would be:
{{#dropdown-item selected=computedProperty value=formField_DropdownItemID}}
computedProperty can deal with your conditional logic. The whole idea is to pull that out of handlebars anyways. :)

Handlebars, avoid compiling (ignore) part of a template?

Is there a way to tell the Handlebar compiler to ignore a block of template.
I know there is the \ solution, like :
\{{ is.ignored}}
but is there something that would do the same, but for a complete block, like :
<script type="text/x-handlebars-template" id="my-template">
<ul>
{{#each items}}
<li>{{display}}</li>
{{/each}}
</ul>
</script>
I believe it would be better (and far more readable) to have something like {{#ignore}}{{/ignore}} instead of adding \ everywhere.
I tried to find something using block helpers, either building something myself, but I can't get my hand on the non-compiled version of what's inside the block.

Unfortunately, Cyril's answer seems out of date? I found this alternative in the Handlebars documentation on raw blocks:
Raw Blocks
Raw blocks are available for templates needing to handle unprocessed mustache blocks.
{{{{raw-helper}}}}
{{bar}}
{{{{/raw-helper}}}}
will execute the helper raw-helper without interpreting the content.
Handlebars.registerHelper('raw-helper', function(options) {
return options.fn();
});
will render
{{bar}}

Yes I finally found it, it's called ... raw ! :
{% raw %}
<script type="text/x-handlebars-template" id="my-template">
<ul>
{{#each items}}
<li>{{display}}</li>
{{/each}}
</ul>
</script>
{% endraw %}
Update : After an update of Handlebars, this snipped seems to not work now. I opened a ticket to see how to make it works.