Để điền vùng chọn, bạn nên thay đổi {{#each}} xuống vùng chọn, như thế này.
<select>
<option disabled selected>Choose option</option>
{{#each company}}
<option>{{category}}</option>
{{/each}}
</select>
Bởi vì nếu bạn đặt {{#each}} ở đầu <select> thẻ sao băng sẽ tạo ra 1 lựa chọn cho mỗi công ty.
Và trình trợ giúp công ty phải đơn giản như return company.find(); đơn giản
Bây giờ, nếu bạn muốn lọc, có nhiều tùy chọn để thực hiện việc này, một trong số đó có thể là tùy chọn này.
Tôi thích sử dụng ReactiveDict (); , vì vậy tôi sẽ sử dụng trong ví dụ này.
Cài đặt nó meteor add reactive-dict
Template.example.onCreated(function(){
var self = this;
self.example = new ReactiveDict();
self.example.setDefault( 'valueToFilter' , null);
});
Bây giờ trong một số sự kiện như change , hãy làm như sau.
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;
}
})
Bây giờ hãy hiển thị kết quả.
Template.example.helpers({
showSelectedValues : function(){
var instance = Template.instance();
return Companies.find( { name : instance.example.get( 'valueToFilter' )} );
}
})
Điều này sẽ cung cấp cho bạn một bức tranh lớn, chúc may mắn!
