[SOLVED] Need help with helper and template

help
1

I have templates below:

<template name="categoryOption">
{{#each category}}
 <option value="{{value}}" 
  {{selectedCategory ../product.category}}>
  {{text}}
 </option>
{{/each}}
</template>

<template name="sellerEditItem">
 <select name="category" id="input_category">
  <option value="" disabled>Choose category</option>
   {{> categoryOption}}
 </select>
</template>

and the following code:

Template.categoryOption.helpers({
	selectedCategory: function(category) {
	if(category){	
	return this.value == category ? 'selected':'';
	}
},
	
category: function() { 
	return [{
		value:'books',
		text:'Books'
	},{
		value:'electronics',
		text:'Electronics'
	},{
		value:'furniture',
		text:'Furniture'
	},{
		value:'clothing',
		text:'Clothing'
	},{
		value:'shoes',
		text:'Shoes',
	},{
		value:'kitchen',
		text:'Kitchenware'
	}];
}
});

My problem is the selectedCategory helper is not being displayed on the selected option. Please help me out on this! Thanks!

2

Where are you setting product.category?
I’m assuming you’ve already debugged the selectedCategory function and found your parameter category to be undefined?

3

I defined a helper for product in sellerEditItem template.

No, i have debugged and it’s not undefined. It has a value.

4

Weird, can’t see it. It might be helpful if you could do a minimal reproduction in meteorpad and link to it. It looks like it’s just one select you’re having a problem with.

5

product.category has a value and this.value == category ? 'selected': ''; returns a value too. But, for some reasons, the result was displayed on the select option.

6

I think it has something to do with Materialize CSS. Once I removed the package. ‘selected’ was displayed on the select option.