Добавление нового объекта в нокаутируемый наблюдаемый массив

Question

Я использую исходный код 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'

Кто-нибудь знает хороший способ добавления новых массивов в многомерный массив наблюдаемых Ко?

Answer 1

Никогда не используйте _latestValue, это то, что Knockout использует за кулисами для целей привязки данных. Это свойство, которое вы никогда не должны пытаться получить или установить.

Чтобы добавить элемент в 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, "", "", "", "", "", ""));
}