Question

我正在尝试学习一些knockout.js，所以我正在浏览网站上的示例，特别是联系示例。（Knockout Contacts Editor）

我试图通过添加一个属性为＆＃39; ContactType＆＃39;

的选择列表来扩展此示例

ContactType是包含2个对象的基本列表。

我已经创建了一个示例的分支并稍微扩展了My Extended Example fiddle

  var initialData = {
    "names": [{
        firstName: "Danny",
        lastName: "LaRusso",
        contactTypeId: 1,
        phones: [{
            type: "Mobile",
            number: "(555) 121-2121"
        }, {
            type: "Home",
            number: "(555) 123-4567"
        }]
    }, {
        firstName: "Sensei",
        lastName: "Miyagi",
        contactTypeId: 2,
        phones: [{
            type: "Mobile",
            number: "(555) 444-2222"
        }, {
            type: "Home",
            number: "(555) 999-1212"
        }]
    }],
        "contactTypes": [{
        "id": 1,
            "type": "Family"
    }, {
        "id": 2,
            "type": "Friend"
    }]
}

var ContactsModel = function (contacts) {
    var self = this;

    self.contactTypes = ko.observableArray(ko.utils.arrayMap(contacts.contactTypes,

    function (contactType) {
        return {
            id: contactType.id,
            type: contactType.type
        };
    }));


    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts.names, function (contact) {
        return {
            firstName: contact.firstName,
            lastName: contact.lastName,
            phones: ko.observableArray(contact.phones),
            contactTypeId: ko.observable(contact.contactTypeId)
        };
    }));

    self.addContact = function () {
        self.contacts.push({
            firstName: "",
            lastName: "",
            phones: ko.observableArray(),
            contactTypeId: ko.observable()
        });
    };

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

    self.addPhone = function (contact) {
        contact.phones.push({
            type: "",
            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("")
};

ko.applyBindings(new ContactsModel(initialData));

HTML

<div class='liveExample'>
     <h2>Contacts</h2>

    <div id='contactsList'>
        <table class='contactsEditor'>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Contact Type</th>
                <th>Phone numbers</th>
            </tr>
            <tbody data-bind="foreach: contacts">
                <tr>
                    <td>
                        <input data-bind='value: firstName' />
                        <div><a href='#' data-bind='click: $root.removeContact'>Delete</a>

                        </div>
                    </td>
                    <td>
                        <input data-bind='value: lastName' />
                    </td>
                    <td>
                        <select class="form-control" data-bind="options: $root.contactTypes,
                                    optionsText: 'type',
                                    optionsValue:'id',
                                     value:'contactTypeId',
                                    optionsCaption: 'Please Select...'"></select>
                    </td>
                    <td>
                        <table>
                            <tbody data-bind="foreach: phones">
                                <tr>
                                    <td>
                                        <input data-bind='value: type' />
                                    </td>
                                    <td>
                                        <input data-bind='value: number' />
                                    </td>
                                    <td><a href='#' data-bind='click: $root.removePhone'>Delete</a>

                                    </td>
                                </tr>
                            </tbody>
                        </table> <a href='#' data-bind='click: $root.addPhone'>Add number</a>

                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <p>
        <button data-bind='click: addContact'>Add a contact</button>
        <button data-bind='click: save, enable: contacts().length > 0'>Save to JSON</button>
    </p>
    <textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'></textarea>
</div>

我有两个问题，我不确定我做错了什么。

加载页面时，选择列表未显示正确的值。相反它只是显示“请选择＆＃39;值

当我尝试保存记录时，不会保存选择列表中的选定值。

我在做一些明显错误的事吗？

Answer 1

问题是您错误地设置了value绑定。 value: 'contactTypeId'，而不是引号。

value: contactTypeId

同样对于保存功能，最好使用使用挖空<select class="form-control" data-bind="options: $root.contactTypes, optionsText: 'type', optionsValue: 'id', value: contactTypeId, optionsCaption: 'Please Select...'"> </select>而不是ko.toJSON

JSON.stringify(ko.toJS

添加选择列表到淘汰VM不填充选择值

1 个答案: