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 ?

Answer 1

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