根据流星中的选定值填充集合中的选择字段并进行过滤 [英] Populate the select field from collection and filter according to the selected value in meteor

问题描述

我是流星的新人.我有一个要从mongo集合本身填充的选择框.我尝试按以下方法进行操作，但不起作用

I am a new guy in Meteor. I have select box which i want to populate from the mongo collection itself.I tried doing this as below but doesn't work

<template name="clist">

<div class="input-field">
 <select>
   <option value="" disabled selected>Choose your option</option>
    {{#each company}}
      <option>{{ccategory}}</option>
    {{/each}}
 </select>
</div>

<ul class="collection" id="listings">
{{#each company}}
 <li>
  {{> employees}}
</li>
{{/each}}

</template>

我也想根据下拉列表中选择的值过滤mytemplate中的数据.请帮助我，我陷入其中.

And also i want to filter the data in mytemplate according to the value selected in the dropdownlist. Please help me iam stuck in this.

这正是我现在所拥有的，但问题是下拉列表是根据所有列表的结果而不是直接来自架构的结果来填充的，并且是所有值的重复.而且我为这两个值使用相同的返回帮助器，例如return company.find().请帮助我

this is exactly what i have now but the problem is the dropdownlist is populating based on the results of all the listings not directly from the schema and is repetitive of all values. and i am using the same returning helper for both these values like return company.find(). Please help me

推荐答案

为了填充选择，您应该像这样将{{#each}}更改为选择.

Well in order to populate the select, you should change the {{#each}} down to the select, like this.

<select>
  <option disabled selected>Choose option</option>
{{#each company}}
  <option>{{category}}</option>
{{/each}}
</select>

因为如果将{{#each}}放在<select>标签流星的顶部，则会为每个公司创建1个选择.

Because if you put the {{#each}} at the top of the <select> tag meteor will create 1 select for each company.

公司帮助程序应该像简单的return company.find();

And the company helper should be simple like a simple return company.find();

现在，如果您要过滤，则有很多选项可以完成此操作，其中一个可能就是这个.

Now if you want to filter, there are many options to accomplish this, one could be this.

我喜欢使用 ReactiveDict(); ，所以我将在此示例中使用.

I like to use ReactiveDict(); , so i will use on this example.

安装meteor add reactive-dict

Template.example.onCreated(function(){
 var self = this;

 self.example = new ReactiveDict();

self.example.setDefault( 'valueToFilter' , null);
});

现在在诸如change之类的事件上，执行以下操作.

Now on some event like change, do the following.

Template.example.events({
 'change select' : function( event, template ) {

   var instance = Template.instance();

   instance.example.set( 'valueToFilter' event.target.value ); //or use $('select').val()  whatever you like to take the value;
  }
})

现在显示结果.

Template.example.helpers({

 showSelectedValues : function(){

  var instance = Template.instance();

  return Companies.find( { name : instance.example.get( 'valueToFilter' )} );
 }
})

这应该给您带来一个广阔的前景，祝您好运！

This should give you a big picture, good luck!

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