将集合中的字段加载到 select 字段并根据 selected 值过滤它

Question

基本上我有两个相关的问题，但我会用数字将它们分开 1) 我正在尝试将单个字段从集合中加载到 select 下拉框中，但它填充了从其下方列表中收集的所有重复值，而不是它自己的助手。

<template name="carsList">

{{> categoryFilter}}

<ul class="collection" id="listings">
{{#each cars}}
<li>
  {{> carItem}}
</li>
{{/each}}
 </ul>
</template>

类别模板是

<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>{{ccategory}}</option>
</template>

categoryFilter 正在保存我正在使用以下助手的下拉模板

Template.categoryFilter.helpers({
companyCategories: function(){
return Cars.find();
}
});

不是从它自己的帮助程序填充，而是加载来自其下方 "listings" 的数据并重复数据。

Image of the result in selectbox

2) 我还想根据 select 下拉框中的值 select 过滤列表（当然是被动的）

请帮忙

编辑

这是我的模板现在的样子

<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>{{justCategory}}</option>
</template>

Answer 1

以下是我将如何进行。首先，下拉列表：您应该使用游标而不是文档数组。所以你的助手应该是：

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，因此它可能无法像我想的那样工作。如果它不起作用，请改用 ReactiveDict。基本上，您在文档的开头添加 var pageSession = new ReactiveDict();，您可以在我的代码中将 Session 替换为 pageSession。

编辑

好的，让我们试试下划线。基于此 answer，您可以对 allJobs 的每个项目的所有不同类别 return 执行以下操作：

Template.categoryFilter.helpers({
    companyCategories: _.uniq(Collection.find({}, {
        sort: {myField: 1}, fields: {myField: true}
    }).fetch().map(function(x) {
        return x.myField;
    }), true);
    }
});

其中 myfield 是您的类别数组字段。

编辑 2

尝试更改您的 html 并将 {{justCategory}} 替换为 {{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>

将集合中的字段加载到 select 字段并根据 selected 值过滤它

Loading fields from collection into select field and filtering it based on selected value

javascript

meteor

meteor-helper