Knockout.js select 'value' as js object from 'options' which comes from ajax request -

off-top: title pretty confusing, can't find correct words describe situation shortly, sorry that. if you'll find better, please suggest yours. guess i've done simple mistake, since i'm new knockout.js, can't find whole day.

here's have:

<select data-bind="     value: selectedpm,     options: pmlist,      optionstext: 'name'"></select> <b>selected pm:</b> <span data-bind="text: selectedpm().name"></span> 

javascript:

function pmmodel(data) {     this.name = data.name;     this.company = data.company;     this.division = data.division;     this.empno = data.empno;  }  function viewmodel() {     // data     var self = this;      self.pmlist = ko.observablearray([]);     self.selectedpm = ko.observable();      // operations     ko.computed(function () {         $.getjson("/cumulativereport/getpmlist", function (alldata) {             var mappedtasks = $.map(alldata, function (item) { return new pmmodel(item); });             self.pmlist(mappedtasks);         });     }); }  ko.applybindings(new viewmodel()); 

in thsis case i'm getting next error in console: uncaught error: unable parse bindings. message: typeerror: cannot read property 'name' of undefined; bindings value: text: selectedpm().name

but works fine when don't use getjson , using mock array

    function pmmodel(data) {         this.name = data.name;         this.company = data.company;         this.division = data.division;         this.empno = data.empno;      }      function viewmodel() {     // data     var self = this;      self.pmlist = ko.observablearray([]);     self.selectedpm = ko.observable();      // operations     ko.computed(function () {         self.pmlist([{name:'aaaa'}, {name:'bbbb'}]);         }); }  ko.applybindings(new viewmodel()); 

or if use js string object optionsvalue

<select data-bind="     value: selectedpm,     options: pmlist,      optionstext: 'name',     optionsvalue: 'id'"></select> <b>selected pm:</b> <span data-bind="text: selectedpm"></span> 

javascript

function pmmodel(data) {     var self = this;     this.name = ko.observable(data.name);     this.company = ko.observable(data.company);     this.division = ko.observable(data.division);     this.empno = ko.observable(data.empno);     this.id = ko.computed(function () { return self.company() + "-" + self.division() + "-" + self.empno(); }); }  function viewmodel() {     // data     var self = this;      self.pmlist = ko.observablearray([]);     self.selectedpm = ko.observable();      // operations     ko.computed(function () {         $.getjson("/cumulativereport/getpmlist", function (alldata) {             var mappedtasks = $.map(alldata, function (item) { return new pmmodel(item); });             self.pmlist(mappedtasks);         });     }); }  ko.applybindings(new viewmodel()); 

can point me i'm doing wrong? in advance.

---

upd1

i found way make work. doesn't looks good, @ least works

<select data-bind="     value: selectedpm,     options: pmlist,      optionstext: 'name'"></select> <!-- ko if: selectedpm --> <b>selected pm:</b> <span data-bind="text: selectedpm().name"></span> <!--/ko--> 

my guess when ajax call fired knockout triggered dependencies of pmlist (selectedpm) , tried re-render dependency value in ui, request processed long , new value not delivered selectedpm in time. doesn't looks legit, first of because version optionsvalue worked fine.but don't have other ideas how explain it, guess , if has more clear vision of or answer, please share it.

well, problem when bind view model page, selectedpm empty observable, calling selectedpm().name blow up, there no name property. don't know if correct thing do, initialise variable named property want:

self.selectedpm = ko.observable({ name: '' }); 

in way, there isn't problem when first binding page.