I trying to assign a dynamic value title to a new variable carat1 with a custom helper, but it currently isn't working.
{{#each items}}
{{assignVar "jsondata" '{["title": "{{title}}", "id": `{{id}}`, "param_name": "{{param_name}}"]}'}}
{{getVar "jsondata"}}
{{assignVar "carat1" "{{title}}" }}
{{getVar "carat1"}}
{{/each}}
When I evaluate the code above, I see the literal string "{{title}}" printed but actual title value is "this is my title".
You want to use a subexpression here.
That is, in your assignVar helper, you don't want to pass the literal string "{{title}}" as the 2nd argument, but want the value of title.
Subexpressions are delimited by parentheses.
So instead of "{{title}}", you'd just write (title) to evaluate the title variable within the assignVar helper.
{{#each items}}
{{assignVar "jsondata" '{["title": "{{title}}", "id": `{{id}}`, "param_name": "{{param_name}}"]}'}}
{{getVar "jsondata"}}
{{assignVar "carat1" (title) }}
{{getVar "carat1"}}
{{/each}}
Related
I'm iterating over an array and generating a partial for every item, which returns a name. I added a parameter called text and set it to "hello!".
{{#each array}}
{{> partial text="hello!" }}
{{/each}}
Adding the parameter to the partial causes the other 'name 'expression to not display. Instead, only "hello!" is shown. Here is the code for my partial:
{{ text }}
{{ name }}
I think your issue is, that you're losing your scope inside that partial, which is the normal behaviour handlebars has.
When you call a partial all parameters that are available within your template won't be there anymore, if you dont pass them to that partial.
So if you want to access {{ name }} inside your partial. you have to call your partial like so :
{{> partial text="hello!" name=name }}
Partials are similar to calling a function in other programming languages, except for that you name your parameters in the call.
Take a look at this pseudo code:
foo = "Hello world!"
myPartial(bar=foo);
function myPartial(bar) {
echo bar; // bar will be "Hello world!"
}
Maybe it helps.
Also feel free to check the handlebars partial documentation to guide you further
I am using meteor 1.4 for building a real time task assignment app.
I am stuck at a point when i want to include a template passing in an argument the template helper of that template to run.
Now when i pass the argument, it is passed as a string and i want to call that template helper. But i cannot find any way in spacebars to call a template helper when i have the helper name available as a context variable of string type.
Please tell whether it is possible and if yes, then how ??
Thanks in advance
Edit 1 - For ex.
<template name="parent">
{{> children helperParameter="someHelper"}}
</template>
<template name="child">
{{> child2 value=helperParameter }}
</template>
<template name="innerchild">
{{value}}
</template>
So basically, I want to pass the value returned by someHelper to the template innerchild and i want to decide which helper (in this case someHelper) to run in child by passing the name of that helper to child template from parent template.
Now, i can not run that helper in child template where i have its name in parameter helperParameter as a string.
Try Template.dynamic.
<template name="layout">
{{> Template.dynamic template=template}}
<!-- This is equivalent to
{{> nameOfNeededTemplate}}
-->
</template>
Template.layout.helpers({
template: function() {
return 'nameOfNeededTemplate';
}
});
I'm trying to pass a variable (tag name) into a Handlebars partial and use an #is block helper on the tag but for some reason it just won't play ball. This is my code:
Call to my partial and passing through the tag name.
{{> nav tagged='page' }}
In the partial itself I do the following (tagged is the variable name passed through):
{{#each tags}}
{{#is tag tagged}}
{{#each pages}}
// Do code here
{{/each}}
{{/is}}
{{/each}}
If I just render the tagged variable it displays the variable value as expected so a bit confused as to why its not working.
Thanks.
The issue you have is that the tagged variable is in the parent context but you're trying to reference it within the #each tags loop.
You can reference the parent context with ../ so the working code would be
{{#each tags}}
{{#is tag ../tagged}}
{{#each pages}}
// Do code here
{{/each}}
{{/is}}
{{/each}}
I'm having an issue with a Session variable that I am using to keep track of a search query when using alongside the Meteor Typeahead package.
When I log the variable in the console the last character displays but when I output my helper in the template that Typeahead calls, it omits the last character.
My event:
Template.bookSearchForm.events
'keyup .typeahead': (e) ->
bookVal = e.target.value
Session.set 'bookSearchValue', bookVal
My helper:
Template.searchNoItems.helpers
bookSearchValue: ->
return Session.get 'bookSearchValue'
My template:
<template name="searchNoItems">
<div class="search-no-results">
<span class="lookupBook">Search for {{ bookSearchValue }}</span>
</div> <!-- /.search-no-results -->
</template>
Any ideas would be greatly appreciated. Just to confirm, the console is spitting out the full query eg: "My Query" whereas in the helper it's only outputting: "My Quer".
Thanks for taking a look.
use this {{{ bookSearchValue }}} notice it's 3 curly braces
Handlebars/Spacebars HTML-escapes values returned by a
{{expression}}. If you don't want to escape a value, use the
"triple-stash", {{{
i want fine control of whitespace but still have readable templates.
Just wanted to see if other's solution to by simple use case.
{{name}}
{{#if age}}
, {{age}}
{{/if}}
# outputs {{name}} , {{age}}
# desire: {{name}}, {{age}}
https://github.com/wycats/handlebars.js/issues/479 - submitted a ticket which was closed.
Following the history from the pull request to add this feature it looks like this is the correct syntax:
<h4>
{{~#object~}}
Surrounding whitespace would be removed.
{{/object}}
</h4>
Result:
<h4>Surrounding whitespace would be removed.</h4>
There is also this syntax which trims only leading whitespace:
<h4>
{{~#object}}
Only leading whitespace would be removed.
{{/object}}
</h4>
Result:
<h4>Only leading whitespace would be removed.
</h4>
Just a comment to Brian answer, If you want to trim whitespace AND do not want handlebars to escape your expression at the same time, the correct syntax to be used is:
{{~{EXPRESSION}~}}
(trimming whitespace before and after the expression while not escaping it)
The Handlebar's Whitespace Control Documentation can be found here:
https://handlebarsjs.com/guide/expressions.html#whitespace-control
Template whitespace may be omitted from either side of any mustache statement by adding a ~ character by the braces. When applied all whitespace on that side will be removed up to the first handlebars expression or non-whitespace character on that side.
These two, comma-list examples would have the same output:
Case 1:
{{#each listItems as |item index|}}
{{#if (eq index 0)}}
{{~item.name~}}
{{else~}}
, {{item.name~}}
{{/if}}
{{/each}}
Case 2:
{{#each listItems as |item index|}}
{{#if (eq index 0)~}}
{{item.name}}
{{~else~}}
, {{item.name}}
{{~/if}}
{{/each}}
I think the cleanest implementation of this would be to add {{"\n"~}} where you want a hard-stop on new lines.
The "\n" can technically be anything except for empty, ie "". I used "\n" to make it clear what I am doing in the editor.
Example
Three empty lines after this
{{"\n"~}}
Three empty lines before this
Two empty lines before this. No empty lines after this.
{{~"\n"~}}
No empty lines before this.
Result
Three empty lines after this
Three empty lines before this
Two empty lines before this. No empty lines after this.No empty lines before this.
Basically, as others have said, any helper can be prefixed or suffixed with ~. Here, I've decided to pass a value that won't render as the helper ("\n") which allows us to pass ~ freely to control before and after whitespace.
Edit
Alternatively:
Handlebars.registerHelper(
'singleLineOnly',
function (options) { // "this" cannot be provided to inline function!
return options.fn(this).replace(/[\r\n]+/gm, '')
}
)
Handlebars.registerHelper(
'singleSpaceOnly',
function (options) { // "this" cannot be provided to inline function!
return options.fn(this).replace(/\s\s+/g, ' ')
}
)
Which will allow you to take something like this:
{{#each this}}
{{#singleLineOnly}}
{{#singleSpaceOnly}}
{{calculatedAmount}}
{{!an example comment}}
{{#if unitOfMeasure.translate}}
{{{unitOfMeasure.translate.value}}}
{{/if}}
{{!some random comment}}
{{#unless unitOfMeasure.translate}}
{{{unitOfMeasure.value}}}
{{/unless}}
{{!Some random comment}}
{{#ifNotEquals (lowerCase product.value) "other"}}
{{!If translated, use translated UOM}}
{{#if product.translate}}
{{{product.translate.value}}}
{{/if}}
{{!If not translated, use default UOM}}
{{#unless product.translate}}
{{{product.value}}}
{{/unless}}
{{/ifNotEquals}}
{{!just some more logic for example}}
{{#ifNotEquals (lowerCase ingredient.value) "other"}}
{{!If translated, use translated UOM}}
{{#if ingredient.translate}}
{{{ingredient.translate.value}}}
{{/if}}
{{!If not translated, use default UOM}}
{{#unless ingredient.translate}}
{{{ingredient.value}}}
{{/unless}}
{{/ifNotEquals}}
<br/>
{{/singleSpaceOnly}}
{{/singleLineOnly}}
{{/each}}
And end up with this:
1/2 oz. first ingredient <br/>
1 pump(s) another ingredient <br/>
3/4 oz. this ingredient <br/>
2 shot(s) that ingredient <br/>
last instruction <br/>
{{#singleLineOnly}} and {{#singleSpaceOnly}} can be used as a wrapper for any text. You'll most likely want to use these with ~ for additional before/after whitespace control. For example: {{~#singleLineOnly~}}
You can add a Handlebars Helper to trim() whitespace
{{#-}}
Surrounding whitespace would be removed.
{{/-}}
more background info: https://github.com/wycats/handlebars.js/pull/336