Utilizing Iron Router, I aim to call a page and filter the results based on the route. In this scenario, the application facilitates the creation of items. Each item contains an array that can encompass zero to multiple tags:
Item: {
_id: <assigned by application>,
itemTags: []
}
The dropdown list on the navbar gathers all tags from the items, performs some clean-up, and then populates them into the dropdown menu:
// HTML
<template name="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Select List to View <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/list/all-list-items">All List Items</a></li>
<li class="divider"></li>
{{#each uniqueTags}}
<li><a href="/list/{{this}}">{{this}}</a></li>
{{/each}}
</ul>
</li>
</ul>
</div>
</div>
</nav>
</template>
// JS
Template.header.helpers({
uniqueTags: function() {
var allItems = Items.find({checked: false});
var uniqueTags = allItems.map((function(allItems) {return allItems.itemTags;}));
uniqueTags = _.flatten(uniqueTags);
uniqueTags = _.compact(uniqueTags);
uniqueTags = _.uniq(uniqueTags);
uniqueTags = _.sortBy(uniqueTags, function (name) {return name;});
return uniqueTags;
}
});
The router then takes you to "/list/". Everything has been smooth sailing so far. However, it hits a snag from this point onwards. My predicament is two-fold:
1) How can I properly fetch the data context of only the items that have the specified tag included in the array?
2) How do I exhibit those items on the "list" page? I am clueless about what should be included in list.js to manage the returned data context
My existing code is provided below, but it's a bit messy and clearly not functioning :)
// JS - router.js
Router.route('/list/:tagName', {
name: 'list',
data: function() {
return Items.find({$and: [
{checked: false}, {listItem: true}, {itemTags: {$in: ['this.params.tagName']}}
]});
}
});
// HTML - list.html
<template name="list">
<h3><span class="label label-default view-list">List</span></h3>
{{#each listItems}}
{{> item}}
{{/each}}
</template>
// JS - list.js
Template.list.helpers({
listItems: function() {
<somehow use the returned data context>
}
});
Thank you for your assistance!