javascript - knockout.js で計算された値を合計する

Question

特定のアイテムのセットの総コストを合計しようとしています。各アイテムには、価格 * 数量の総コストがあります。これは問題なく計算されています。ただし、すべてのアイテムの合計コストを合計しようとしています。

すべてのアイテムの合計が個別に計算されることを考えると、どうすればそれらをすべて合計できますか? これはviewModel、モデル、または両方の外で行われますか?

フィドル http://jsfiddle.net/B9rAt/3/のコードは次のとおりです。そのままでは、合計は表示されません。合計の「*数量」ビットを削除すると表示されますが、それはアイテムの合計ではなく、アイテムの価格の合計のみです。

function ItemEntry(ID, inventory, price) {
    var self = this;
    self.ID = ID;
    self.inventory = inventory;
    self.price = price;

    self.selectedQuantity = ko.observable(); //returned value (trying to get it at least!)

    self.itemTotal = ko.computed(function() {
        var price = self.price;
        var quantity = self.selectedQuantity();
        var total = price * quantity; 
        return total ? "$" + total.toFixed(2) : "None";
    });


    self.formattedPrice = ko.computed(function() {
        var price = self.price;
        return price ? "$" + price.toFixed(2) : "None";        
    });
}

function EntryViewModel(newItem) {
    var self = this;
    self.newItem = newItem;


    //start the array with some items
    self.itemNumbers = ko.observableArray([
        new ItemEntry("1", 3, 4.99) //ID, inventory, price 
,new ItemEntry("6", 2, 10.00) //ID, inventory, price 
    ]);

   //Compute total cost here
   self.totalCost = ko.computed(function() {
       var total = 0;
       var quantity = self.selectedQuantity();
        for (var i = 0; i < self.itemNumbers().length; i++) {
            total += Number(self.itemNumbers()[i].price * quantity);
        }
       return total;
    });    

    self.removeItem = function(item) { self.itemNumbers.remove(item) }
}

//populate the select list with values up to the number in inventory (ex, if inventory is 3, it will fill with 0-7)
ko.bindingHandlers.quantityDropdown = {
    init: function(quantityDropdown, inventory, EntryViewModel) {
        var quantity = ko.utils.unwrapObservable(inventory());
        for(var i = 1; i <= quantity; i++){
            $(quantityDropdown).append('<option value="' + i + '">' + i + '</option>');
        }
    }
};



ko.applyBindings(new EntryViewModel());