I need to iterate through custom Array directly in the ember template like:
{{#each [1,2,3,4,5,6,7,8,9,10] as |num|}}
<div class="input-group-{{num}}">
.
.
.
</div>
{{/each}}
How can I do it? The above code doesn't render anything.
If you want to do this, just use a helper. You can either create an helper or use an existing one.
For example, by using ember-array-helper you can express it like that:
{{#each (array 1 2 3 4 5 6 7 8 9 10) as |num|}}
{{num}}<br>
{{/each}}
Or, use range helper of ember-composable-helpers. Such as:
{{#each (range 10 20) as |number|}}
{{! `number` will go from 10 to 19}}
{{/each}}
Related
I have already tried this SO Post
But, i want to achieve the following:
Component
abc = [10,20,30,40,50]
cde = [0,1,2,3,4]
Template
{{#each cde as |num|}}
{{ abc.[num] }}
{{/each}}
Expected Output:
10 20 30 40 50
But, it doesn't output anything. What is wrong?
Try this,
{{#each cde as |num|}}
{{get abc (concat num '')}}
{{/each}}
I dont get the need for cde array,
each block comes with index, if needed you can use it.
{{#each abc as |num index|}}
This question already has an answer here:
Concatenation string with variable in emblem.js
(1 answer)
Closed 7 years ago.
I have this helper call in my template:
{{my-helper id='myID'}}
And I want to make the id param value a bit more dynamic, for example:
{{#each charts as |chart|}}
{{my-helper id='chart' + chart.id}}
{{/each}}
How I can I use string interpolation and concatenation to create a value for a param in a helper call?
You can use the concat helper to do this:
{{#each charts as |chart|}}
{{my-helper id=(concat 'chart' chart.id)}}
{{/each}}
It's not ES2015 String interpolation, but it will do what you want.
I have one array of objects inside this objects I have some list of id's and using this id's I have to render multiple templates using #each loop for handlebars.
Simple this statement will return me the list of containing names of template.
{{#each data in sections1}}
{{data.id}}
{{/each}}
Output :
A B C D E F G H I J K L M N O P Q R S T U V W X
Consider this all A to Z are different template names respectively
Now I'm trying to render all these templates using #each loop in handlebar But I don't know the exact syntax.
For example can we do like this way ?
{{#each data in sections1}}
{{render data.id}} //Here I'm getting error Because of it is not exact syntax
{{/each}}
Maybe you should consider using partials, naming them with the proper name based on data.id value. Then use them like: {{partial data.id}}
DEMO
Classes having one or more students. I wanted to display multiple classes in rows and student names in that particular class as comma separated values. I have used following code but it doesn't work. It is giving runtime error as
CS0201: Only assignment, call, increment, decrement, await, and new object expressions can be used as a statement.
`columns.Bound(c => c.Students).Template
( m =>
#<text>
#foreach (var student in m.Students)
{
<li> #{ #student.Name; }</li>
}
</text>
);`
The right syntax is this:
columns.Bound(c => c.Students).Template(#<text>
<ul>
#foreach (var student in item.Students)
{
<li>#student.Name</li>
}
</ul>
</text>);
use this
<li> #{ #item.student.Name; }</li>
instead of
<li> #{ #student.Name; }</li>
To get the comma-separated values in the column, I did this:
columns.Bound(s => s.Students).Title("Students").Template(#<text>
#String.Join(",", (from g in item.Students select g.name))
</text>
);
I want to do what should be a simple compare but I have been stuck for the longest time on this:
I have a template that calls a list template, each list is a new column.
For the first column, I do NOT want certain fields displayed. Each column has a variable {{type}}
I want to do either:
a) pass type to the list template so that list can render based on type equals something
or
b) do an compare on type before I call list (in an 'each' loop) - e.g.
{{#if $eq myVar "test"}}
Show this text
{{/if}}
Neither approach works.
This seems to be the simplest thing but I am scratching head and unable to find examples.
thank you
Max
Unsure if this does what you want to achieve, it would help if you post some of your HTML. But to do what you want in b) couldn't you do:
{{#if isEqual myVar "test"}}
...
{{/if}}
and
Template.example.helpers({
isEqual: function(var1, var2) {
return var1 === var2;
}
});
It is probably easier to use collection.find({type: someType}) to just give your template what it should show. Make someType a session variable and you are done.
This sort example shows this pattern.