KnockoutJS如何爲數組中的每個項目實現計算的observable？

我需要爲數組中的每個元素都有一個計算的可觀察值。這個計算出的observable的解析需要依賴每個數組元素上下文中存在的其他屬性。KnockoutJS如何爲數組中的每個項目實現計算的observable？

請檢查下面的示例情況：

這是一個KnockoutJS的FOREACH結合到嵌套陣列，具有基團=類別，並嵌套在每個類別的項目的結果。

在我的場景中，初始數組在其元素中具有「普通」屬性，就像從後端檢索一樣，後來被映射到具有相同結構的另一個數組中，但數量屬性被故意設置爲敲除可觀察值。在這個映射過程中，我將數量設置爲淘汰可觀察值，我還需要設置另一個計算的可觀察屬性來表示項目總數（價格屬性x數量屬性）。該項目的總計算觀察值必須針對數組中的每個元素髮生，並且必須依賴每個數組元素上下文中的price和quantity屬性的內容。

請檢查下面的屏幕快照，想象一個條形菜單，其中綁定到可觀察數組元素的輸入標籤上輸入數量，並且在更改每個數量時，綁定到td標籤的計算可觀察值應反映項目總計算。

Please also check the JS Fiddle for this

正如你將在JS小提琴注意到，這部分在陣列映射功能，實現totalComputed財產顯然是錯誤的，這是行不通的。

totalComputed: ko.computed(function() { 
      return element.items[indexInArrayItems].quantity * element.items[indexInArrayItems].price; 
     })

你能幫忙，最好讓我的小提琴小提琴的工作？

來源

2016-12-16 Renato Xavier

您需要通過創建可觀察變量和observableArray來利用淘汰賽的威力，然後在計算函數中使用依賴項，以便每次依賴關係發生變化時自動更新計算。

這是基於你的JS提琴例如：https://jsfiddle.net/rnhkv840/22/

var MainViewModel = function(){ 
var self = this; 
self.dataSource = ko.observableArray([]); 
//probably inside your ajax success 
self.dataSource($.map(dataFromBackend, function (item) { 
    return new CategoryViewModel(item); 
    })); 
} 

var CategoryViewModel = function(data){ 
    var self = this; 
    self.Items = ko.observableArray($.map(data.items, function (item) { 
    return new ItemViewModel(item); 
    })); 
    self.category = ko.observable(data.category); 
} 

var ItemViewModel = function(data){ 
    var self = this; 
    self.description = ko.observable(data.description); 
    self.price = ko.observable(data.price); 
    self.quantity = ko.observable(data.quantity); 
    self.totalComputed = ko.computed(function() { 
     return self.price() * self.quantity(); 
    }); 
} 
var vm = new MainViewModel(); 
ko.applyBindings(vm);

來源

2016-12-16 22:05:55

KnockoutJS如何爲數組中的每個項目實現計算的observable？

回答

相關問題