Om de select te vullen, moet je de {{#each}} veranderen in de select, zoals dit.
<select>
<option disabled selected>Choose option</option>
{{#each company}}
<option>{{category}}</option>
{{/each}}
</select>
Want als je de {{#each}} bovenaan de <select> tag meteor maakt 1 selectie voor elk bedrijf.
En de helper van het bedrijf moet eenvoudig zijn, zoals een eenvoudige return company.find();
Als je nu wilt filteren, zijn er veel opties om dit te bereiken, een daarvan zou dit kunnen zijn.
Ik gebruik graag ReactiveDict(); , dus ik zal het in dit voorbeeld gebruiken.
Installeer het meteor add reactive-dict
Template.example.onCreated(function(){
var self = this;
self.example = new ReactiveDict();
self.example.setDefault( 'valueToFilter' , null);
});
Nu op een evenement zoals change , doe dan het volgende.
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;
}
})
Toon nu de resultaten.
Template.example.helpers({
showSelectedValues : function(){
var instance = Template.instance();
return Companies.find( { name : instance.example.get( 'valueToFilter' )} );
}
})
Dit zou je een groot beeld moeten geven, veel succes!