javascript - 获取observableArray项的子属性以触发更改

问题

我有一个shoppingcart视图模型，其中observableArray视图模型是cartitems。

当我更新我的subtotal视图模型的cartitems属性时，我的shoppingcart视图模型上的computeObservable需要更新，但是我不知道如何获取它来触发更新

例

function shoppingcart() {
    var self = this;
    self.cartItems = ko.observableArray([]);
    self.grandTotal = ko.computed(function() {
        var total = 0;
        _.each(self.cartItems(), function (item) {
            total += item.subTotal;
        }
    }

    //inital load of the data
    dataservice.loadCartItems(self.cartItems);
}



function cartItem() {
    var self = this;
    self.quantity = ko.observable(0);
    self.price = 0.00;

    self.subTotal = ko.computed(function() {
        return self.price * self.quantity();
    }
}

然后我认为我有类似的东西

<ul data-bind='foreach: cartItems'>
    <!--other stuff here -->
    <input type='text' data-bind="value: quantity, valueUpdate: 'afterkeydown'"/>
</ul>

<span data-bind='value: grandTotal'></span>

这是否可以正常工作，而我只是搞砸了，还是需要添加其他东西来进行更新？

现在，当更改文本框中的数量时，范围中的grandTotal将不会更新。我假设这是因为此子属性实际上并未算作更改的cartItems集合。

在这里触发集合更新的好方法是什么？

最佳答案

您没有从计算出的grandTotal中返回任何内容。另外，您试图将subTotal函数添加到正在运行的total而不是其返回值。您需要使用括号调用才能调用cartItem上的计算。

function shoppingcart() {
    var self = this;
    self.cartItems = ko.observableArray([]);
    self.grandTotal = ko.computed(function() {
        var total = 0;
        _.each(self.cartItems(), function (item) {
            total += item.subTotal(); // need parenthesis to invoke
        }
        return total; // return a value, otherwise function is void
    }

    //inital load of the data
    dataservice.loadCartItems(self.cartItems);
}

function cartItem() {
    var self = this;
    self.quantity = ko.observable(0);
    self.price = 0.00;

    self.subTotal = ko.computed(function() {
        return self.price * self.quantity();
    }
}