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在幕后使用数据绑定的目的。这是一个你永远不应该尝试获取或设置的属性。

要将项添加到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, "", "", "", "", "", ""));
}

将一个新对象添加到knockout observable数组中

1 个答案: