[英]Populate the select field from collection and filter according to the selected value in meteor
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 我有一个想要从mongo集合本身填充的选择框。我尝试如下操作但不起作用
<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>
And also i want to filter the data in mytemplate according to the value selected in the dropdownlist. 我也想根据下拉列表中选择的值过滤mytemplate中的数据。 Please help me iam stuck in this. 请帮助我,我困在这。
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. 这正是我现在所拥有的,但是问题是dropdownlist是基于所有列表的结果而不是直接来自架构的结果填充的,并且是所有值的重复。 and i am using the same returning helper for both these values like return company.find(). 而且我对这两个值使用相同的返回帮助器,例如return company.find()。 Please help me 请帮我
Well in order to populate the select, you should change the {{#each}} down to the select, like this. 为了填充选择,您应该像这样将{{#each}}向下更改为选择。
<select>
<option disabled selected>Choose option</option>
{{#each company}}
<option>{{category}}</option>
{{/each}}
</select>
Because if you put the {{#each}}
at the top of the <select>
tag meteor will create 1 select for each company. 因为如果将{{#each}}
放在<select>
标记的顶部,流星将为每个公司创建1个选择。
And the company helper should be simple like a simple return company.find();
而且公司帮助程序应该很简单,就像一个简单的return company.find();
Now if you want to filter, there are many options to accomplish this, one could be this. 现在,如果您要过滤,则有很多选项可以完成此操作,其中一个可能就是这个。
I like to use ReactiveDict(); 我喜欢使用ReactiveDict(); , so i will use on this example. ,因此我将在此示例中使用。
Install it meteor add reactive-dict
安装它的meteor add reactive-dict
Template.example.onCreated(function(){
var self = this;
self.example = new ReactiveDict();
self.example.setDefault( 'valueToFilter' , null);
});
Now on some event like change
, do the following. 现在,在诸如change
事件上,执行以下操作。
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;
}
})
Now show the results. 现在显示结果。
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! 这应该给您带来一幅宏图,祝您好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.