流星将动态变量从模板传递给助手

Question

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:

html

<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>

js

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!

Answer 1

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'}
      ]
    }
});

Answer 2

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;
  }

 });
}