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

Question

我目前正在使用基因敲除框架。 我以一个基本的联系表为例 ，并根据自己的需要对其进行了修改。 每个联系人都有的状态ACTIVE或INACTIVE 。 在状态下拉菜单中，我想显示联系人的选定状态。 我没有得到两个选项，而是得到了一个通常的选择选项列表。 我怎样才能正确地显示敲门菜单中的下拉菜单？ DEMO

根据@ haim770编辑：

    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>

3.您最好依靠boolean字段而不是string数组：

contact.isActive = ko.observable(true);