Search code examples
meteorhandlebars.jsspacebars

Meteor Spacebars - {{#each}} params


This is my code:

HTML

Card 1:

<!-- Shopping list -->
<div id='shopping' class='card'>
  {{#each task}}
  <ul class="card__task">
    <li>{{taskText}}</li>
    <i class="fa fa-minus delete-task"></i>
  </ul>
  {{/each}}
</div>

Card 2:

<!-- Medicine list -->
<div id='medicine' class='card'>
  {{#each task}}
  <ul class="card__task">
    <li>{{taskText}}</li>
    <i class="fa fa-minus delete-task"></i>
  </ul>
  {{/each}}
</div>

template.helper

  task: function() {
    return Tasks.find({}, {
      sort: {
        createdAt: -1
      }
    });
  }

tasks collection example

Ex.1:

   ...
  "taskGroup": "medicine",
  "taskText": "medicine task 1",
   ...

Ex.2:

   ...
  "taskGroup": "shopping",
  "taskText": "shopping task 1",
   ...

So, I got a collection where I store tasks with the taskGroup corresponding to the textarea input id. For now each iterates over every task that I have in my tasks collection and those 2 cards show all tasks.

Question:

How can tell each block to only iterate over tasks that have taskGroup equal to this cards id?

Something like:

  task: function() {
    return Tasks.find({
    taskGroup: *the card where each block is located*.getAttribute("id");
    }, {
      sort: {
        createdAt: -1
      }
    });
  }

Solution

  • You can create a blaze helper that does the filter by the taskGroup

    tasks: function(taskGroup) {
    return Tasks.find({
    taskGroup: taskGroup;
    }, {
      sort: {
        createdAt: -1
      }
    });
    

    }

    That way you can call it on the template like this

    {{#each tasks 'medicine'}}
    ...
    {{/each}}