我正在处理一个流星项目,我想根据它们的属性将同一个集合中的对象放在不同的div中。最简单的解释方法可能是展示一个测试用例:
<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'}
]
});
我想根据位置将引脚放在正确的div中。现在我可以手动写出html中的每个div和每个div的帮助(如果没有更好的解决方案的话),但是我试图弄清楚最有效的解决方案是什么。
我尝试使用以下代码将位置传递回辅助函数:
{{#each pins location="{{..}}{{this}}}}
和这个
{{#each pins location="{{..}}{{this}}"}}
并运行一个函数,但location =之后的代码是{{..}}{{this}}
而不是值。
我也尝试重组这样的数据:
pins:{
bottomcenter: [{name: 'test1'}, {name: 'test3'}]
topleft:[{name: 'test2'}]
}
等,并将参数作为数据上下文传递:
{{>pins {{..}}{{this}}}}
但这似乎也不起作用。任何帮助表示赞赏!
答案 0 :(得分:0)
你的模板应该是:
<template name="pins">
{{#each pins}}
<div class = "pin" >{{this.name}} {{this.location}}</div>
{{/each}}
</template>
和这样的助手:
Template.pins.helpers({
pins: function() {
return [
{name: 'test1', loaction: 'bottomcenter'},
{name: 'test2', loaction: 'topleft'},
{name: 'test3', loaction: 'bottommcenter'},
{name: 'test4', loaction: 'middleright'}
]
}
});
答案 1 :(得分:0)
我想我明白了!诀窍似乎是你不能在其他{{}}
括号中嵌入{{}}
括号。所以你使用:
<template name="pins">
{{#each pins .. this}}
<div class="pin">
{{this.name}}
</div>
{{/each}}
</template>
..
和this
会传回辅助函数,然后您可以根据结果进行搜索:
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;
}
});
}