0

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

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

谢谢！

编辑 - - -

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

        $(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
4

1 回答 1

1

从异常消息中可以清楚地看出，您claimItem.TradeOffers是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()为 null 则有效：

self.TradeOffersIds = ko.computed(function () {
    return ko.utils.arrayMap(self.TradeOffers(), function (offer) {
        return offer.OfferedProductId;
    });
});
于 2013-09-16T15:13:04.687 回答