返回計算數組時，KockoutJS代碼是否中斷？

Question

任何想法這個代碼有什麼問題？所有工作正常，但是當我將這個特定的計算屬性添加到視圖模型（自我），然後一切都打破。

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 

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