I'm working on a meteor project where I want to place an objects from the same collection in different divs depending on their properties. The easiest way to explain is probably to show a test case:
<template name="board">
{{#each rows}}
<div id="row-{{this}}" class="row">
{{#each columns}}
<div id="{{..}}-{{this}}" class="column column-{{this}} row-{{..}}- column">
{{>pins }}
</div>
{{/each}}
</div>
{{/each}}
</template>
<template name="pins">
{{#each pins}}
<div class = "pin" >{{this}}</div>
{{/each}}
</template>
Template.board.helpers({
rows: [
'top',
'middle',
'bottom'
],
columns: [
'left',
'center',
'right'
]
});
Template.pins.helpers({
pins:[
{name: 'test1', loaction: 'bottomcenter'},
{name: 'test2', loaction: 'topleft'},
{name: 'test3', loaction: 'bottommcenter'},
{name: 'test4', loaction: 'middleright'}
]
});
I'd like to place the pins in the correct div based on their location. Now I can of course manually write out every div in the html and a helper for each one (and will if there's no better solution), but I'm trying to figure out what the most efficient solution is.
I tried passing the location back to the helper function with the following code:
{{#each pins location="{{..}}{{this}}}}
and this
{{#each pins location="{{..}}{{this}}"}}
and running a function, But the tags after location= come through as {{..}}{{this}}
instead of the values.
I also tried restructuring the data like this:
pins:{
bottomcenter: [{name: 'test1'}, {name: 'test3'}]
topleft:[{name: 'test2'}]
}
etc, and passing the parameter as a data context:
{{>pins {{..}}{{this}}}}
but that didn't seem to work either. Any help is appreciated!
your template should like:
<template name="pins">
{{#each pins}}
<div class = "pin" >{{this.name}} {{this.location}}</div>
{{/each}}
</template>
and the helper like this:
Template.pins.helpers({
pins: function() {
return [
{name: 'test1', loaction: 'bottomcenter'},
{name: 'test2', loaction: 'topleft'},
{name: 'test3', loaction: 'bottommcenter'},
{name: 'test4', loaction: 'middleright'}
]
}
});
I think I got it! The trick seems to be that you can't embed {{}}
brackets in other {{}}
brackets. So you use:
<template name="pins">
{{#each pins .. this}}
<div class="pin">
{{this.name}}
</div>
{{/each}}
</template>
..
and this
get passed back to the helper function, and then you can search based on the results:
Template.pins.helpers({
pins: function(row,col){
var search = row+"-"+col;
var results = [];
var pinarr = [
{insert data here}
];
for(var i = 0; i < pinarr.length ; i++){
if(pinarr[i].location === search) {
results.push(pinarr[i]);
}
}
return results;
}
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.