Uncaught Error: невозможно обработать привязку "foreach" (knockout js)

Question

Ошибка:

«Uncaught Error: Невозможно обработать привязку» foreach: function () {return phones} «Сообщение: недопустимый объект, который выглядит как наблюдаемый; возможно, из другого экземпляра Knockout»

html:

<h3>Contacts</h3>
<div >
    <table >
        <thead>
            <tr>
                <th>first name</th>
                <th>last name</th>
                <th>number</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: contacts">
            <tr>
                <td>
                    <input data-bind="value :firstName" /><br />
                    <a href="#" data-bind="value : $root.deleteContact">delete contact</a>
                </td>
                <td>
                    <input data-bind="value : lastName" />
                </td>
                <td>
                    <table>
                        <tbody data-bind="foreach : phones">
                            <tr>
                                <td><select data-bind="options : contactType , value : contactTypeValue"></select></td>
                                <td><input data-bind="value : number" /></td>
                                <td><a href="#" data-bind="click : $root.deleteNumber">delete number</a></td>
                            </tr>
                        </tbody>
                    </table>
                    <a href="#" data-bind="click :$root.addNumber">add number</a>
                </td>
            </tr>
        </tbody>
    </table>
    <br /><br />
    <button data-bind="click : addContact"> add contact</button>
</div>

javascript:

var contactsModel = function ()
    {
     var self = this;
     this.contacts = ko.observableArray([]);
     this.addContact = function ()
     {
         this.contacts.push({
             firstName: "",
             lastName: "",
             phones: ko.observableArray()
         });
     };
     this.deleteContact = function (contact)
     {
         this.contacts.remove(contact);
     };
     this.addNumber = function (contact)
     {
         contact.phones.push({
             type: "",
             number: ""
         });
     };
     this.deleteNumber= function (phone)
     {
         $.each(this.contacts(), function () { this.phones.remove(phone) })
     };
    }
ko.applyBindings(new contactsModel());

Я новичок в нокауте JS, поэтому могу кто-то, пожалуйста, дайте решение вышеуказанной ошибки.

Answer 1

отмечу 2 вещи. Прежде всего, вы объявляете observableArray без пустого массива в нем, это может выглядеть как простой случай, но у knockout есть проблема, связанная с объявлениями массивов, по крайней мере до некоторой версии. Поэтому перейдите к следующему:

this.contacts.push({
             firstName: "",
             lastName: "",
             phones: ko.observableArray([]) // here
         });

Также есть причина, по которой вы определяете self=this;, но вы никогда ее не используете. Перепишите свой код так:

var contactsModel = function ()
    {
     var self = this;
     self.contacts = ko.observableArray([]);
     self.addContact = function ()
     {
         self.contacts.push({
             firstName: "",
             lastName: "",
             phones: ko.observableArray([])
         });
     };
     self.deleteContact = function (contact)
     {
         this.contacts.remove(contact);
     };
     self.addNumber = function (contact)
     {
         contact.phones.push({
             type: "",
             number: ""
         });
     };
     self.deleteNumber= function (phone)
     {
         $.each(self.contacts(), function () { self.phones.remove(phone) })
     };
    }