I have two lists:
var one =["test","test1","test2"];
var two =["temp","temp1","temp2",""temp3","temp4"];
I tried something below but it is not working.
<table>
{{#each one}}
<td>{{this}}</td>
<td>
<select>
{{#each two}}
<option>{{this}}</option>
{{/each}}
</select>
</td>
{{/each}}
</table>
The problem is that the "two" array is scoped outside of the first each block.
Try this instead:
var context = {
one : ["test","test1","test2"],
two : ["temp","temp1","temp2",""temp3","temp4"]
};
<table>
{{#each context.one}}
<td>{{this}}</td>
<td>
<select>
{{#each ../two}}
<option>{{this}}</option>
{{/each}}
</select>
</td>
{{/each}}
</table>
There is a syntax error in second each block. It should be{{#each two}} instead of {{each}}.
Related
My outer for loop is working and printing name but inner loop in which i'm trying to iterate through systems is not working.
var executions = [
{
name:'Password',
email:'p#pol.com',
systems: [
{system: 'PME1'},
{system: 'PME2'},
{system: 'PME2'},
],
}
];
{#each executions}}
<span>Name : {{name}}</span>
<table>
<tbody>
{{#each systems}}
<tr>
<td>
<p>{{ system }}</p>
</td>
</tr>
{{/each}}
</tbody>
</table>
{{/each}}
I am trying to iterate using the properties of an object to dynamically print a table having an array with the properties and an object with the values of each property.
I don't know how to do the 2 iterations using hbs express from handlebars
people: [{
name: "ken",
lastname: "grace",
age: 10
},
{
name: "ron",
lastname: "bond",
age: 20
}];
properties = ["name","lastname", "age"];
HTML CODE:
<table>
<thead>
<tr>
{{#each properties as |property index|}}
<th>
<span>{{property}}</span>
</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each people}}
<tr>
{{#each properties}}
<th>
{{!-- trying something like: --}}
{{!-- {{people.property}} --}}
</th>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
As user #76484 mentioned, you want to use the built-in lookup helper:
The lookup helper allows for dynamic parameter resolution using Handlebars variables. It can be used to look up properties of object based on data from the input.
In your specific example, you'd probably want to store your people and properties iterations in a block parameter (e.g., named |person| and |property|), as well as using ../ on your inner loop since the context has changed.
Putting that all together for you example, the HBS markup might look like:
<table>
<thead>
<tr>
{{#each properties as |property index|}}
<th><span>{{property}}</span></th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each people as |person|}}
<tr>
{{#each ../properties as |property|}}
<th>{{lookup person property}}</th>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
See this playground link for the resulting HTML as well.
topics is a collection which returns a few documents. Each document has a few fields. One of the fields is a string array.
I am trying to represent the values of a string array as a radio button group for each document returned. I am not able to give each group a unique name. I tried console.log statements and found that the radiobutton groups come out good but then gets messed up as the helpers are called more times than the number of documents returned.
My html
<template name=topics>
{{#each topics}}
<tr>
<td><input type="checkbox" name="selectone" id="{{uniqueid}}"/></td>
<td><textarea rows=4 name="topicname" readonly>{{name}} </textarea></td>
<td><input type="text" value="{{dateCreated}}" name="datecreated" readonly/></td>
<td>
{{#each choices}}
{{>radiogroup}}
{{/each}}
</td>
<td>Edit</td>
</tr>
{{/each}}
</template>
<template name='radiogroup'>
<li><input type=radio name="{{radiogroupname}}" />{{this}}</li>
</template>
My js:
Template.topics.helpers({
uniqueid: function() {
Session.set('topicid',this._id);
return this._id;
},
choices:function() {
return this.choices;
},
});
Template.radiogroup.helpers({
radiogroupname: function() {
return(Session.get('topicid'));
},
});
This is not a good use of a Session variable in that you are reusing it over and over to represent a given _id inside a loop. It will be constantly changing. Since you just need the _id of the parent object, you can use relative path notation in spacebars to access it in your template as follows:
<template name='radiogroup'>
<li><input type=radio name="{{../_id}}" />{{this}}</li>
</template>
Then you don't even need your helpers. You don't need your choices helper in any case since choices is already iterable.
In Spacebars, can I access an outer-each’s property by name of an inner each property. I.e. ? access ymBStocks.price via via {{../{{title}}}}
More complete example
<template name="ymbStockstable">
<table class="table table-hover table-ymbStocks">
<thead>
<tr>
{{#each columns}}
<th>{{title}}</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each ymbStocks}}
<tr>
{{#each columns}}
<td>{{../columns.title}}</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</template>
w3jimmy #w3jimmy 14:09
create a helper to get the property of an object
Template.yourTemplate.helpers({
getProperty: function (obj_name, prop_name){
if (obj_name.hasOwnProperty(prop_name)){
return obj_name.prop_name;
}
}
})
and then in spacebars you do like this:
{{#each ymbStock in ymbStocks}}
...
{{#each column in columns}}
<td>price: {{getProperty column.title ymbStock.price}}</td>
{{/each}}
{{/each}}`
I just spit it out, without testing...
I have this block of code in a Spacebars template:
1.
<select class="form-group">
{{#each choices}}
<option>{{this}}</option>
{{/each}}
</select>
I would like to repeat this N times incrementing the number each time like so:
1.
<select class="form-group">
{{#each choices}}
<option>{{this}}</option>
{{/each}}
</select>
2.
<select class="form-group">
{{#each choices}}
<option>{{this}}</option>
{{/each}}
</select>
3.
<select class="form-group">
{{#each choices}}
<option>{{this}}</option>
{{/each}}
</select>
I would love to be able to pass N to a custom template tag to take care of this (e.g. {{choices 3}}). What's a nice DRY way to do this? I have a vague notion I could write a template helper, but I'm not sure where to start.
Working Example:
http://meteorpad.com/pad/THAQfpfrru5MgAGnS/Copy%20of%20Leaderboard
You can pass a count in and return an array of arbitrary objects. Not the most elegant... but it worked!
HTML
<body>
{{>content}}
</body>
<template name="content">
{{#each loopCount 5}}
<select class="form-group">
{{#each choices}}
<option>{{this}}</option>
{{/each}}
</select>
{{/each}}
</template>
JS
Template.content.helpers({
choices: function(){
return ['choice1','choice2','choice3']
},
loopCount: function(count){
var countArr = [];
for (var i=0; i<count; i++){
countArr.push({});
}
return countArr;
}
});
If you're using the underscore package for Meteor, and also happen to be using CoffeScript, you can create the following single-line template helper:
t.helpers
loop: (count) -> {} for i in _.range count
You can then use this helper in your template:
{{! Will display 'Output' 5 times }}
{{#each loop 5}}
Output
{{/each}}