敲除模型在计算的 observable 中打破数组长度答案

【问题标题】：Knockout model breaking on array length in computed observable敲除模型在计算的 observable 中打破数组长度
【发布时间】：2013-02-12 00:36:35
【问题描述】：

在http://jsfiddle.net/gZC5k/1004/ 慢慢扩展我的嵌套表单我遇到了一个困难，我想使用 ko.computed 来计算嵌套 JSON 数组中的子项数量。中断的代码在 // this 中断

    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
    return {
        firstName: ko.observable(contact.firstName),
        lastName: ko.observable(contact.lastName),
        isKey: ko.observable(contact.isKey),
        gender: ko.observable(contact.gender),
        phones: ko.observableArray(ko.utils.arrayMap(contact.phones, function (phone) {
            return {
                type: ko.observable(phone.type),
                number: ko.observable(phone.number),
                calls: ko.observableArray(phone.calls),
                callsVisible: ko.observable(false)
            };
        })),
        addresses: ko.observableArray(contact.addresses),
        optionGender: optionGender,
        phonesVisible: ko.observable(false),
        addressesVisible: ko.observable(false),

// this breaks            
//            numberOfPhones: ko.computed(function (contact) {
//                return contact.phones.length;
//            });
    };
}));

哪里出错了？

【问题讨论】：

标签： arrays knockout.js computed-observable

【解决方案1】：

我认为您需要将每个联系人创建为一个函数：

var ContactModel = function(contact)
{
    var self = this;
            self.firstName = ko.observable(contact.firstName);
            self.lastName = ko.observable(contact.lastName);
            self.isKey = ko.observable(contact.isKey);
            self.gender = ko.observable(contact.gender);
           self. phones = ko.observableArray(ko.utils.arrayMap(contact.phones, function (phone) {
                return {
                    type: ko.observable(phone.type),
                    number: ko.observable(phone.number),
                    calls: ko.observableArray(phone.calls),
                    callsVisible: ko.observable(false)
                };
            }));
            self.addresses = ko.observableArray(contact.addresses);
            self.optionGender = optionGender;
            self.phonesVisible = ko.observable(false);
            self.addressesVisible = ko.observable(false);

            self.numberOfPhones = ko.computed(function () {
                return self.phones().length;
            });
        return self;
};

并像这样创建它：

self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
        return new ContactModel(contact);
    }));

【讨论】：

Paul，谢谢 4 您的建议，不幸的是它没有奏效。我也对应该在哪里定义函数有疑问..
是有错误，还是没有显示正确的值？
它破坏了代码..在jsfiddle中它现在被注释掉了，否则数据不会加载
那就试试这个吧。至少它不会再爆炸了！ jsfiddle.net/manzanotti/gZC5k/1005
酷，现在我在加载时有一个电话计数器:) jsfiddle.net/gZC5k/1007 非常感谢！

【解决方案2】：

你可以试试这个：

numberOfPhones: ko.computed(function () {
                return contact.phones.length;
     })

【讨论】：

如果用户使用该表单添加电话号码，它可能不会更新？
你不需要创建视图模型，因为 Paul 更新了它就可以工作
好吧，我想是的，只是检查一下我没有错过任何事情（众所周知！）。