这是我将如何进行的。首先,下拉菜单:您应该使用光标而不是文档数组。所以你的帮手应该是:
Template.categoryFilter.helpers({
companyCategories: function(){
return Jobs.find();
}
});
和你的categoryFilter
模板 HTML 可能是这样的
<template name="categoryFilter">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
{{selectedCategory}} <!-- refer to an helper which returns the reactive variable-->
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
{{#each companyCategories}}
<li role="presentation"><a role="menuitem" class="categoryItem" tabindex="-1" href="#">{{yourCatergoryNameField}}</a></li>
{{/each}}
</ul>
</div>
</template>
然后,您可以创建一个事件来记录单击时在下拉列表中选择的当前类别
"click .categoryItem": function(e, t) {
var text = $(e.target).text()
Session.set("selectedCategory", text)
},
现在,您可以使用以下方式过滤您的汽车selectedCategory
反应变量。为此,你需要另一个帮手。例如:
Template.carList.helpers({
carListingByCategory: function(){
var filter = Session.get ("selectedCategory");
return Car.find(category:filter)
}
});
这应该够了吧。我从不使用 Session,所以它可能不会像我想象的那样工作。如果不起作用,请使用反应字典 https://atmospherejs.com/meteor/reactive-dict反而。基本上,你添加var pageSession = new ReactiveDict();
在你的文档的开头,你可以替换Session
with pageSession
在我的代码中。
EDIT
好吧,让我们尝试一下下划线。基于此answer https://stackoverflow.com/a/23255779/3793161,您可以执行以下操作来返回 allJobs 的每个项目的所有不同类别:
Template.categoryFilter.helpers({
companyCategories: _.uniq(Collection.find({}, {
sort: {myField: 1}, fields: {myField: true}
}).fetch().map(function(x) {
return x.myField;
}), true);
}
});
where myfield
是您的类别数组字段。
EDIT 2
尝试更改您的 html 并替换{{justCategory}}
with {{this}}
:
<template name="categoryFilter">
<div class="input-field">
<select>
<option value="" disabled selected>Choose your option</option>
{{#each companyCategories}}
{{> companyCategory}}
{{/each}}
</select>
<label>Select Category</label>
</div>
</template>
<template name="companyCategory">
<option>{{this}}</option>
</template>