繁体   English   中英

根据流星中的选定值填充集合中的选择字段并进行过滤

[英]Populate the select field from collection and filter according to the selected value in meteor

我是流星的新人。 我有一个想要从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>

我也想根据下拉列表中选择的值过滤mytemplate中的数据。 请帮助我,我困在这。

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

为了填充选择,您应该像这样将{{#each}}向下更改为选择。

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

因为如果将{{#each}}放在<select>标记的顶部,流星将为每个公司创建1个选择。

而且公司帮助程序应该很简单,就像一个简单的return company.find();

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

我喜欢使用ReactiveDict(); ,因此我将在此示例中使用。

安装它的meteor add reactive-dict

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

 self.example = new ReactiveDict();

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

现在,在诸如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;
  }
})

现在显示结果。

Template.example.helpers({

 showSelectedValues : function(){

  var instance = Template.instance();

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

这应该给您带来一幅宏图,祝您好​​运!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM