未捕获的错误：无法处理绑定“foreach”（淘汰 js）

Question

错误：

“未捕获的错误：无法处理绑定“foreach：函数（）{返回电话}” 消息：看起来像可观察对象的无效对象；可能来自另一个 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());

我是 Knockout JS 的新手，所以有人可以解决上述错误。

Answer 1

我会注意两件事。 首先，您声明 observableArray 中没有空数组，这可能看起来像一个简单的案例，但淘汰赛在数组声明方面存在问题，至少在某些版本中是这样。 所以改成这样：

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) })
     };
    }