knockoutjs select change event gets fired when binding

Question

I have this knockout code: http://jsfiddle.net/nickbuus/Rwabt/

The problem is that whenever the dropdown select box gets filled the change event gets called:

 <select data-bind="options: $root.Categories, optionsText: 'categoryName', optionsValue:       'categoryId', value: CatId, optionsCaption: 'Vælg...', event: { change: $root.selectionChanged }"></select>

How do I fix this ?

Solution

There was a lot of broken and unused code in there

http://jsfiddle.net/Rwabt/5/

This one is corrected. What actually did make it call change is for two reasons, you used string in the food model and numbers in category model ("1" != 1), Id 2 was not present in the categories (Only 1) the beer category was set for both food items (CatId 2). Since KO could not find these in the options list it reseted the selected value to null.

That said please have a look at my fiddle to see a more KO way of doing things

Comments

[nemesv]

Why do you need subscribe on the change event? Usually the value binding and subscribe on the value property change should be enough for most the use cases...

[webdevduck]

Despite being confused by the relationship between cats and beer (although I'm all for it), I gleaned enough from your example to adapt it to fix my own issue, thanks :)