javascript - 添加一个新对象到 knockout observable 数组

Question

我正在使用 John Papa 的 SPA 源代码制作我自己的应用程序。我现在遇到一个问题，我想将一个新对象添加到我的可观察数组中。我发现这很困难，因为在我的代码中有办公室和联系人数量的循环。因此，当我将一个元素添加到我的 KO 可观察数组时，我想将它添加到正确的位置。

 <div data-bind="foreach: agency">
        <div data-bind="foreach: offices">
            <button class="btn btn-info btn-force-refresh pull-right" data-bind="event: { click: $root.addOffice }">Add a new office</button>
            <table>
                <tr>
                    <td>
                        <h1>Offices</h1>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <table>
                                <tr>
                                    <td>Address1</td>
                                    <td>Address2</td>
                                    <td>Address3</td>
                                    <td>Address4</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input data-bind="value: address1, event: { change: $root.cacheForm }" />
                                    </td>

                                    <td>
                                        <input data-bind="value: address2, event: { change: $root.cacheForm }" />
                                    </td>

                                    <td>
                                        <input data-bind="value: address3, event: { change: $root.cacheForm }" />
                                    </td>

                                    <td>
                                        <input data-bind="value: address4, event: { change: $root.cacheForm }" />
                                    </td>
                                </tr>

                                <tr>
                                    <td>Address5</td>
                                    <td>faxNumber</td>
                                    <td>postCode</td>
                                    <td>telephoneNumber</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input data-bind="value: address5, event: { change: $root.cacheForm }" />
                                    </td>
                                    <td>
                                        <input data-bind="value: faxNumber, event: { change: $root.cacheForm }" />
                                    </td>
                                    <td>
                                        <input data-bind="value: postCode, event: { change: $root.cacheForm }" />
                                    </td>
                                    <td>
                                        <input data-bind="value: telephoneNumber, event: { change: $root.cacheForm }" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="article-counter">
                            <address data-bind="text: contacts().length"></address>
                            <address>found</address>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button data-bind='click: $root.addContact'>Add Contact</button>
                        <div data-bind="foreach: contacts">
                            <table>
                                <tr>
                                    <td>Title</td>
                                    <td>First Name</td>
                                    <td>Surname</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input data-bind="value: title, event: { change: $root.cacheForm }" readonly="true"  />
                                    </td>
                                    <td>
                                        <input data-bind="value: firstName, event: { change: $root.cacheForm }" readonly="true"  />
                                    </td>
                                    <td>
                                        <input data-bind="value: surName, event: { change: $root.cacheForm }" readonly="true" />
                                    </td>
                                    <td>
                                        <a href='#' data-bind='click: $root.removeContact' style="color:blue">Remove</a>

                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

当我点击时:

<button data-bind='click: $root.addContact'>Add Contact</button>

我想要一个带有空文本框的新 tr 供用户输入数据。

define(['services/datacontext'], function (dataContext) {
    var initialized = false;
    var agency;

    var save = function (agency, myStoredValue) {
        // Clear Cache because user submitted the form. We don't have to hold onto data anymore.
        localStorage.setItem('Agency', null);
        localStorage.setItem('Offices', null);
        localStorage.setItem('Contacts', null);
        return dataContext.saveChanges(agency);
    };

    var vm = { // This is my view model, my functions are bound to it. 
        //These are wired up to my agency view
        activate: activate,
        agency: agency,
        brands: brands,
        title: 'agency',
        refresh: refresh, // call refresh function which calls get Agencies
        save: save,
        cacheForm: cacheForm,
        addOffice: addOffice,
        addBrand : addBrand,
        removeBrand: removeBrand,
        addContact: addContact,
        removeContact: removeContact
    };
    return vm;



     function addContact(office) { // Passing in object array of agency. We no it contains correct office and agency ID

    var agencyID = office.agencyID._latestValue;

    office.contacts._latestValue.push({
        agencyID: office.agencyID._latestValue,
        emailAddress: "",
        firstName: "",
        jobName: "",
        office: "",
        OfficeID: office.officeID._latestValue,
        personID: "",
        surName: "",
        title: ""
    });
}             
});    

所以我推一个新元素给

office.contacts._latestValue

在函数中

function addContact(office)

但是我得到这个错误:

Unhandled exception at line 9423, column 13 in http://localhost:13762/scripts/breeze.debug.js

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'getProperty'

有谁知道将新数组添加到多维 ko 可观察数组的好方法吗？

Answer 1

切勿使用 _latestValue，这是 Knockout 在幕后用于数据绑定(bind)的用途。这是您永远不应尝试获取或设置的属性。

要将项目添加到 observableArray，如文档所述，只需使用 .push();您还应该考虑为被推送的对象创建一个模型。

function contact(id, email, firstname, lastname, jobname, title) {
    var self = this;
    self.Id = ko.observable(id);
    self.Email = ko.observable(email);
    self.FirstName = ko.observable(firstname);
    self.LastName = ko.observable(lastname);
    self.JobName = ko.observable(jobname);
    self.Title = ko.observable(title);
}

function addContact(office) {

    var agencyID = office.agencyID;

    office.contacts.push(new contact(agencyID, "", "", "", "", "", ""));
}