選項綁定覆蓋初始視圖模型值

Question

我試圖按照Stack Overflow上的其他類似問題，但迄今爲止在解決問題方面尚未成功。

我使用jQuery AJAX來檢索幾個項目：聯繫人及其相關信息，所有可用的稱呼類型，所有可用的電子郵件類型和所有可用的電話類型。

我已成功將選項綁定到選擇框。但是，它似乎覆蓋了保存初始視圖模型值的「值」綁定。

難道你們能幫我解決嗎？如果您有任何疑問需要澄清，請讓我知道。

請參考下面的代碼：

視圖模型：

function contactPageViewModel() { 

    var self = this; 
    self.contact = ko.observable(); 
    self.availableSalutations = ko.observableArray(); 
    self.availableEmailTypes = ko.observableArray(); 
    self.availablePhoneTypes = ko.observableArray(); 
    self.availableAddressTypes = ko.observableArray(); 
} 

其中接觸是從所述服務器，其包括所述元件contact.salutation未來的對象。

回來接觸的JSON是：

{ 
    //... 
    "createdBy":null, 
    "createdOn":1392848929000, 
    "updatedBy":null, 
    "updatedOn":1392848929000, 
    "contactId":305, 
    "salutation":{"salutationId":102,"salutation":"Mrs."}, 
    "firstName":"Laura", 
    "middleInitial":"K", 
    "lastName":"Ritchey" 
    //... 
} 

從availableSalutations回來（這是一個JSON對象包裝 '的ListObject' 的屬性）的JSON是：

[{"salutationId":41,"salutation":"Ms."}, 
{"salutationId":101,"salutation":"Mr."}, 
{"salutationId":66,"salutation":"CDR"}, 
{"salutationId":81,"salutation":"LCDR"}, 
{"salutationId":102,"salutation":"Mrs."}, 
{"salutationId":121,"salutation":"Mr."}, 
{"salutationId":64,"salutation":"LTC"}] 

的代碼將JSON結果映射到淘汰賽觀察對象：

contactPageViewModel.contact = ko.mapping.fromJS(data.listObject[0]); 
     contactPageViewModel.availableEmailTypes = ko.mapping 
       .fromJS(data.listObject[1]); 
     contactPageViewModel.availableSalutations = ko.mapping 
       .fromJS(data.listObject[2]); 
.... 
     applyBindings(); 

HTML：

<label for="rank"> Rank/Title: </label> 
<select data-bind="optionsText: 'salutation', 
        options: availableSalutations, 
        value: contactPageViewModel.contact.salutation" 
     class="rankList" 
     name="Rank" 
     id="rankSelect"> 
</select> 

Answer 1

嘗試value: $root.contact().salutation而不是value: contactPageViewModel.contact.salutation。

或者：

<label for="rank"> Rank/Title: </label> 
<!-- ko with: contact --> 
<select data-bind="options: $root.availableSalutations, optionsText: 'salutation', value: salutation" class="rankList" name="Rank" id="rankSelect"> 
</select> 
<!-- /ko --> 

更新：
你可以看看這個Fiddle。可能是它含有大量的多餘的代碼，並可以將其簡化，但主要的事情是分離的初始和選定的稱呼，並添加optionsCaption選擇綁定：

var initialSalutation = new salutationViewModel(data.salutation); 

和：

self.salutation = ko.observable(); 
self.displayedSalutation = ko.computed(function() { 
    if (self.salutation()) { 
     return self.salutation(); 
    } else { 
     return initialSalutation; 
    } 
}) 

更新2：
看看這個Fiddle。我添加了optionsValue: 'salutationId'來選擇綁定並將displayedSalutation移動到contactPageViewModel。
我覺得問題是與匹配的對象（從聯繫人選擇項目和稱呼）。當選擇的值是salutationId和接觸稱呼也salutationId（數值，而不是對象）的所有工作良好。