将集合中的字段加载到选择字段中，并根据选择的值对其进行过滤 [英] Loading fields from collection into select field and filtering it based on selected value

问题描述

基本上我有两个相关的问题，但我将用数字分开 1)我试图将单个字段加载到集合的选择下拉框中，但该字段将填充它从其下面的列表中收集的所有重复值，而不是其自己的帮助器.

Basically i have two questions which are related but i'll separate them with numbers 1) I am trying to load a single field into a select dropdown box from collection but its populating with all repetitive values it collected from the list below it instead of its own helper.

<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使用下面的帮助程序保存iam的下拉模板

categoryFilter is holding the dropdown template for which iam using the below helper

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

与其从自己的助手中填充数据，不如从其下面的列表"中加载数据并重复数据.

instead of populating from its own helper its loading the data that is coming from "listings" below it and repeating data.

选择框中结果的图片

2)我还想根据在选择下拉框中选择的值来过滤列表(当然是反应性的)

2) I also want to filter the listings based on the value selected in the select dropdown box (Ofcourse reactive)

请帮助

编辑

这是我的模板现在的样子

This is how my template looks now

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

推荐答案

这是我要进行的操作.首先，下拉菜单:您应该使用游标而不是文档数组.因此，您的助手应该是:

Here is how I would proceed. First, the dropdown: you should use a cursor instead of an array of documents. So your helper should be:

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

和您的categoryFilter模板HTML可能是这样的

and your categoryFilter template HTML could be something like this

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

然后您可以创建一个事件，以记录单击该下拉菜单中所选的当前类别

You can then create an event to record the current category selected in the dropdown when it is clicked

    "click .categoryItem": function(e, t) {
        var text = $(e.target).text()
        Session.set("selectedCategory", text)
    },

现在，您可以使用selectedCategory反应变量对汽车进行过滤.为此，您需要另一个帮助器.例如:

Now, you can filter your cars using the selectedCategory reactive variable. For this, you need another helper. It could be for instance:

Template.carList.helpers({
    carListingByCategory: function(){
       var filter = Session.get ("selectedCategory");
       return Car.find(category:filter)
    }
});

这应该可以解决问题.我从不使用会话，因此它可能无法像我想的那样工作.如果不起作用，请改用 ReactiveDict .基本上，您在文档的开头添加了var pageSession = new ReactiveDict();，并且可以在我的代码中将Session替换为pageSession.

That should do the trick. I never use Session, so it might not work as I suppose it does. If it does not work, use ReactiveDict instead. Basically, you add var pageSession = new ReactiveDict(); at the beginning of your doc and you can replace Session with pageSession in my code.

编辑

好的，让我们尝试一下下划线.基于此 answer ，您可以执行以下操作来为allJobs的每个项目返回所有不同的类别:

Ok, let's have a try with underscore. Based on this answer, here is what you can do to return all the distinct categories for every item of allJobs:

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

Try to change your html and replace {{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>

这篇关于将集合中的字段加载到选择字段中，并根据选择的值对其进行过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！