json - Knockoutjs Dropdown Pre Selection In Nested Arbitary Javascript Object Working Fine KO 2x versions Not working in KO 3x versions -

json - Knockoutjs Dropdown Pre Selection In Nested Arbitary Javascript Object Working Fine KO 2x versions Not working in KO 3x versions -

so sample data. il loading form server in json format build below looking objec graph. array of "choice" objects each having id, name, stages & currentstageid properties. "stages" property in "choice" object array of "stage" object having id, name & value properties.the "choice" object go through no.of stages "first stage" "fourth stage" user can select "stage" give dropdown list , save it. "currentstageid" property stores "id" of stage object give in stage respective "choice" object in

note: each selection can have different types of stages brevity kept simple possible

i.e selection 1 current saved stage 4

var info = [ new choice({ id: 1, name: "one", stages: [ new stage({ id: 1, name: "first stage", value: 25 }), new stage({ id: 2, name: "second stage", value: 50 }), new stage({ id: 3, name: "third stage", value: 75 }), new stage({ id: 4, name: "fourth stage", value: 100 })], currentstageid: 4 }), new choice({ id: 2, name: "two", stages: [ new stage({ id: 1, name: "first stage", value: 25 }), new stage({ id: 2, name: "second stage", value: 50 }), new stage({ id: 3, name: "third stage", value: 75 }), new stage({ id: 4, name: "fourth stage", value: 100 })], currentstageid: 3 }), new choice({ id: 3, name: "three", stages: [ new stage({ id: 1, name: "first stage", value: 25 }), new stage({ id: 2, name: "second stage", value: 50 }), new stage({ id: 3, name: "third stage", value: 75 }), new stage({ id: 4, name: "fourth stage", value: 100 })], currentstageid: 2 })];

here "choice" & "stage" modles hold info , viewmodel binding

function viewmodel(data) { var self = this; self.choices = ko.observablearray(data); //dont require pre selection kept empty observable //will set first item in dropdown list self.selectedchoice = ko.observable(); } function choice(data) { //debugger; this.id = data.id; this.name = data.name; //require pre selection of stage selection can go through no of //stages , selected stage name , value stored this.selectedstage = ko.observable(ko.utils.arrayfirst(data.stages, function (item) { homecoming item.id === data.currentstageid; })); this.stages = ko.observablearray(data.stages); } function stage(data) { this.id = data.id; this.name = data.name; this.value = data.value; } ko.applybindings(new viewmodel(data));

here view

<select data-bind="options: choices, optionstext: 'name', value: selectedchoice"></select> <select data-bind="options: selectedchoice().stages, optionstext: 'name', value: selectedchoice().selectedstage"></select>

knockout.js 2x version

pre selection of saved stage working selected stage selection updated underlying observable

here working sample ko 2x in js

knockout.js 3x version

pre selection of saved stage not working selected stage selection not preserved. when selection changed selectedstage set first item in dropdown list each , every time selection changed.

here working sample ko 3x

finally actual part. question!

why same code behaving differently 2 different versions of ko. missing new in ko? or bug in ko? what code changes should done produce same fucntionality in later version of ko, using latest version of ko? because project beingness developed latest version konckout.js 3.1.0 , don't wanna switch older version functionality. which behavior of ko version right whether 2x or 3x? happening internally? causing behavior discrepancies?

thanks in advance.

i think related 2. bindings refreshed independently should utilize selectedchoice move out options binding, e.g.

<div data-bind="with: selectedchoice"> <select data-bind="options: stages, optionstext: 'name', value: selectedstage"></select> </div>

javascript json knockout.js knockout-2.0 knockout-3.0