淘汰計算功能 - 無法讀取屬性'價格'null

Question

我想訪問一個對象的屬性，我知道該對象存在（並具有我需要的屬性），因爲我可以將它記錄到控制檯。

但是，當我嘗試訪問它時，它說無法讀取null的屬性「價格」。

我是C＃開發人員，很困惑我一定在做錯事，但我不知道是什麼？從我的屏幕截圖中，您可以看到返回的對象。

我的代碼如下：

self.total = ko.computed(function(){ 
    var total = 0;  
    var selectedServerName = this.selectedServer(); 
    var selectedServerObject = ko.utils.arrayFirst(this.server, function(server){ 
     console.log("server.name = " + server.name); 
     console.log("selectedServerName = " + selectedServerName); 
     var serverCompare = (server.name == this.selectedServer()); 
     console.log("serverCompare is " + serverCompare); 
    }, this); 

    var selectedOsName = this.selectedOs(); 
    var selectedOsObject = ko.utils.arrayFirst(this.os, function(os){ 
     console.log("os.name = " + os.name); 
     console.log("selectedOsName = " + selectedOsName); 
     var osCompare = (os.name == this.selectedServer()); 
     console.log("osCompare is " + osCompare); 
    }, this); 

    total = total + selectedServerObject.price + selectedOsObject.price; 

    return total; 
},this); 

更新

我更新的小提琴是在這裏：當第二行紀錄中添加console.log(selectedServerObject.price看來fiddle here

感謝d.raev， arrayFirst函數開始被調用selectedServer = undefined。

server.name = DELL R210 
selectedServerName = undefined 
serverCompare is false 
server.name = DELL R710 
selectedServerName = undefined 
serverCompare is false 
server.name = DELL R720 Dual CPU 
selectedServerName = undefined 
serverCompare is false 
os.name = Windows Standard 
selectedOsName = undefined 
osCompare is false 
os.name = Windows Enterprise 
selectedOsName = undefined 
osCompare is false 
os.name = CentOS Linux 
selectedOsName = undefined 
osCompare is false 
os.name = Debian 
selectedOsName = undefined 
osCompare is false 
1. Uncaught TypeError: Cannot read property 'price' of null 

從selectedOsName undefined值或selectedServerName導致總失敗，什麼是他們被設置爲未定義的原因是什麼？

Answer 1

你的腳本運行2次此功能，增加第二調試顯示它更清楚：

var selectedServerObject = ko.utils.arrayFirst(this.server, function(server){ 
    console.log("server.name = " + server.name); 
    console.log("selectedServer = " + this.selectedServer()); 
    return server.name == this.selectedServer(); 
}, this); 

輸出：

---

server.name = DELL R210
selectedServer = 未定義
server.name = DELL R710
selectedServer = 不確定
server.name = DELL R720雙CPU
selectedServer = 不確定
空（selectedServerObject）
...
server.name = DELL R210
selectedServer = DELL R210
對象{名稱：「DELL R210」，規格：「1 x 2.4GHz四核CPU 4GB RAM
2 x 300GB SAS 15k」，價格：100}

---

如果selectedServerObject設置只需添加一個檢查..或者找到爲什麼它被稱爲2倍：

例如：

if(selectedServerObject){ 
    total = total + selectedServerObject.price; 
} 

Answer 2

小提琴這裏http://jsfiddle.net/g18c/2SAxR/2/顯示d.raev的懷疑是正確的： ）我創建了我的原始代碼的修剪版本，當selectedServer未定義時會調用描述計算函數，從而導致所有內容都被彈出。

我已經標記d。raev的答覆作爲答案，因爲它找到了潛在的原因 - 將很好地理解這種knockoutjs行爲完全關閉。

<div data-bind="foreach: server"> 
    <div> 
     <input type="radio" name="server" data-bind="attr: {value: sku}, checked: $root.selectedServer" /> 
     <span data-bind="text: name"></span> 
    </div> 
</div> 
<p data-bind="text: selectedServer"></p> 
<p data-bind="text: description"></p> 

var serverOptions = [{ 
    name: "One", 
    sku: 1000, 
    specification: "yes", 
    price: 100 
}, { 
    name: "Two", 
    sku: 1001, 
    specification: "hello", 
    price: 200 
}, { 
    name: "Three", 
    sku: 1002, 
    specification: "wow", 
    price: 300 
}]; 

viewModel = function() { 
    var self = this; 
    self.server = serverOptions; 
    self.selectedServer = ko.observable(); 
    self.description = ko.computed(function() { 
     var selectedSku = this.selectedServer(); 
     if(typeof selectedSku == "undefined") 
     { 
      console.log("we are not fully bound, bombing out here..."); 
      return; 
     } 

     var found = ko.utils.arrayFirst(serverOptions, function (item) { 
      var result = (item.sku == selectedSku); 
      console.log("arrayFirst check => item.sku = " + item.sku + " selectedSku = " + selectedSku + ". result = " + result); 
      return result; 
     }, this); 

     var textDescription = found.name + " - " + found.specification + " (" + found.price + ")"; 

     return textDescription; 
    }, this); 

    return self; 
}; 

ko.applyBindings(new viewModel());