Question

知道这段代码有什么问题吗？一切正常，但是当我将这个特定的计算属性添加到viewmodel（self）时，一切都会中断。

self.TradeOffersIds = ko.computed(function () {
    var ids = [];
    $.each(self.TradeOffers(), function (index, offer) {
        alert(index);
        ids[index] = offer.OfferedProductId;
    });
    return ids;
}, this)

谢谢！

EDIT ------

根据要求提供一些额外的代码。这是完整的脚本：

        $(function () {
        var userId = $("body").data("userid");
        function Claim(claimItem) {
            var self = this;
            self.ID = claimItem.ID;
            self.ClaimingUser = ko.observable(claimItem.ClaimingUser);
            self.ClaimingUserUrl = ko.computed(function () {
                return "/profile/" + this.ClaimingUser().ID;
            }, this);
            self.ClaimedProduct = ko.observable(claimItem.ClaimedProduct);
            self.ClaimedProductUrl = ko.computed(function () {
                return "/product/" + this.ClaimedProduct().ID;
            }, this);
            self.RequestType = ko.observable(claimItem.RequestType);
            self.MessageThread = ko.observable(claimItem.MessageThread);
            self.CreationDate = ko.computed(function () {
                var date = new Date(claimItem.CreationDate);
                return date.toLocaleDateString();
            }, this);
            self.IsApproved = ko.observable(claimItem.IsApproved);
            self.IsHandled = ko.observable(claimItem.IsHandled);
            self.TradeOffers = ko.observable(claimItem.TradeOffers);
            //self.TradeOffersIds = ko.computed(function () {
            //    var ids = [];
            //    $.each(self.TradeOffers(), function (index, offer) {
            //        alert(index);
            //        ids[index] = offer.OfferedProductId;
            //    });
            //    return ids;
            //}, this);
            self.IsBeingHandled = ko.observable(false);
            self.approve = function () {
                self.IsBeingHandled(true);
                $.post("/api/Claim/Approve/" + self.ID)
                .done(function () {
                    self.IsApproved(true);
                    self.IsHandled(true);
                })
                .fail(function () {
                    alert("Er is iets misgegaan met het behandelen van deze claim. Er wordt aan gewerkt! Probeer het later nog eens.");
                })
                .always(function () {
                    self.IsBeingHandled(false);
                });
            }
            self.decline = function () {
                self.IsBeingHandled(true);
                $.post("/api/Claim/Decline/" + self.ID)
                .done(function () {
                    self.IsApproved(false);
                    self.IsHandled(true);
                })
                .fail(function () {
                    alert("Er is iets misgegaan met het behandelen van deze claim. Er wordt aan gewerkt! Probeer het later nog eens.");
                })
                .always(function () {
                    self.IsBeingHandled(false);
                });
            }
            self.IsHandledText = ko.computed(function () {
                var txt = "Je hebt ";
                if (self.IsApproved() == true) {
                    if (self.RequestType() == "Claim") {
                        txt = txt + "deze claim geaccepteerd";
                    } else if (self.RequestType() == "Produce") {
                        txt = txt + "dit verzoek geaccepteerd";
                    } else if (self.RequestType() == "Trade") {
                        txt = txt + "dit ruilverzoek geaccepteerd";
                    }
                } else {
                    if (self.RequestType() == "Claim") {
                        txt = txt + "deze claim geweigerd";
                    } else if (self.RequestType() == "Produce") {
                        txt = txt + "dit verzoek geweigerd";
                    } else if (self.RequestType() == "Trade") {
                        txt = txt + "dit ruilverzoek geweigerd";
                    }
                }
                return txt;
            }, this)
            self.viewClaimingUserProfile = function (data, event) {
                var options = {
                    title: $("#profileTitleHtml" + self.ClaimingUser().ID).html(),
                    trigger: "manual",
                    html: true,
                    content: $("#profileBodyHtml" + self.ClaimingUser().ID).html()
                }
                $(event.target).popover(options);
                $(event.target).popover('show')
            }
            self.hideClaimingUserProfile = function (data, event) {
                $(event.target).popover('hide')
            }
            self.showTradeModal = function (data, event) {
                $("#tradeOffersModal" + self.ID).modal('toggle')
                var apiString = "/api/Product/RetrieveByIds";
                var ids = [];
                $.getJSON(apiString, {
                    Ids: [1, 2]
                })
                .done(function (data) {
                    //alert(data.length);
                })
                .fail(function (jqxhr, textStatus, error) {
                    var err = textStatus + ", " + error;
                    console.log("Request Failed: " + err);
                    alert("Er is iets misgegaan met het ophalen van jouw berichten. Er wordt aan gewerkt!");
                })
            }
        }

        function ClaimViewModel() {
            var self = this;
            self.Claims = ko.observableArray([]);
            $.getJSON("/api/Claim/RetrieveAllByUserId/" + userId, function (claimData) {
                var mappedClaims = $.map(claimData, function (claimItem) { return new Claim(claimItem) });
                self.Claims(mappedClaims);
            }).fail(function () {
                alert("error");
            });
        }

        ko.applyBindings(new ClaimViewModel());
    });

以下是Chrome控制台的错误：

Uncaught TypeError: Cannot read property 'length' of null jquery-1.7.1.js:630
jQuery.extend.each jquery-1.7.1.js:630
(anonymous function) Claim:176
e knockout-2.1.0.js:34
E.a.h knockout-2.1.0.js:36
Claim Claim:174
(anonymous function) Claim:267
jQuery.extend.map jquery-1.7.1.js:771
(anonymous function) Claim:267
fire jquery-1.7.1.js:1046
self.fireWith jquery-1.7.1.js:1164
done jquery-1.7.1.js:7399
callback

Answer 1

从异常消息中可以清楚地看出，claimItem.TradeOffers的{{1}} null为claimItem。

由于$.each无法在null上运行，因此您需要先进行一些检查：

self.TradeOffersIds = ko.computed(function () {
    var ids = [];

    if (!self.TradeOffers()) // if self.TradeOffers() is falsy: null, undefined
       return ids;

    $.each(self.TradeOffers(), function (index, offer) {
        alert(index);
        ids[index] = offer.OfferedProductId;
    });
    return ids;
}, this);

或者您可以使用与您的循环相同的ko.utils.arrayMap（doc），如果self.TradeOffers()为空，则可以正常运行：

self.TradeOffersIds = ko.computed(function () {
    return ko.utils.arrayMap(self.TradeOffers(), function (offer) {
        return offer.OfferedProductId;
    });
});

返回计算数组时KockoutJS代码是否中断？

1 个答案: