填充下拉菜单 - 从服务器中选择的选项

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);