填充下拉菜單 - 從服務器中選擇的選項

Question

我目前使用的是knockout.js框架。我已經採取了基本聯繫表格example，並將其修改爲符合我自己的需要。每個聯繫人的狀態爲ACTIVE或INACTIVE。在狀態下拉菜單中，我想顯示聯繫人的選定狀態。而不是獲得兩個選項，我得到一個通常的選擇選項列表。如何在knockout.js中正確顯示下拉菜單？每@ haim770 DEMO

編輯：

var ContactsModel = function (contacts) { 
    var self = this; 
    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) { 
    return { 
      firstName: contact.firstName, 
      lastName: contact.lastName, 
      selectedOptionValue : contact.selectedOptionValue, 
      phone: contact.phone, 
      alt_phone: contact.alt_phone, 
      main1: ko.observable(contact.main1), 
      main2: ko.observable(contact.main2) 
     }; 
    })); 

    self.statusList = ['ACTIVE', 'INACTIVE']; 

    self.addContact = function() { 
     self.contacts.push({ 
      firstName: "", 
      lastName: "", 
      selectedOptionValue : ko.observable("ACTIVE"), 
      phone: "", 
      alt_phone: "", 
      main1: false, 
      main2: false 
     }); 
    }; 

    self.removeContact = function (contact) { 
     self.contacts.remove(contact); 
    }; 

    self.addPhone = function (contact) { 
     contact.phones.push({ 
      number: "" 
     }); 
    }; 

    self.removePhone = function (phone) { 
     $.each(self.contacts(), function() { 
      this.phones.remove(phone) 
     }) 
    }; 

    self.save = function() { 
      self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2)); 
     }; 


    self.lastSavedJson = ko.observable(""); 


}; 

$.getJSON("functions/getPerson.php", function(allData) { 
      ko.applyBindings(new ContactsModel(allData)); 
}); 

HTML

<li> 
<select data-bind="options: $root.statusList, value: selectedOptionValue"></select> 
</li> 

JSON

[{"firstName":"James","lastName":"Southerland","phone":"1234567890","statusList":"ACTIVE","alt_phone":"1234567890","main1":true,"main2":false},{"firstName":"Tina","lastName":"Turner","phone":"1234567890","statusList":"INACTIVE","alt_phone":"1234567890","main1":false,"main2":true}] 

Answer 1

1. 的JSON從噸返回他的服務器格式不正確。而不是在selectedOptionValue中設置實際聯繫人狀態（與您在addContact方法中的做法相同），您將其作爲statusOptionValues字段返回。

2. 無需包括在每一個接觸的 '有效/無效' 陣列（statusOptionValues）。試試這個：

self.statusList = ['ACTIVE', 'INACTIVE']; 

然後更改綁定聲明適當：

<select data-bind="options: $root.statusList, value: selectedOptionValue"></select> 

你最好依靠boolean場，而不是string的數組：

contact.isActive = ko.observable(true);