2

问题

我有一个shoppingcart带有视图模型observableArray的cartitems视图模型。

当我更新视图模型的subtotal属性时，我的cartitems视图模型上的 computedObservableshoppingcart需要更新，但我不知道如何让它触发更新

例子

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>

这是否可行，我只是在某个地方搞砸了，还是我需要添加其他东西来更新它？

现在，当文本框中的数量发生变化时，span 中的 grandTotal 不会更新。我假设这是因为这个子属性实际上并没有算作正在更改的 cartItems 集合。

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

4

2 回答 2

2

你没有从你的grandTotal计算中返回任何东西。此外，您试图将subTotal函数添加到运行中，total而不是其返回值。您需要使用括号调用才能调用计算的 on 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();
    }
}
于 2013-11-05T17:09:15.497 回答
1

因此，如果我理解正确，主要问题是当其中一个元素发生更改时，您需要触发 observableArray 突变。可以做到，但我不知道这是否是最佳做法。看到这个替代实现：Observable notify parent ObservableArray

此小提琴的示例解决方案手动调用 valueHasMutated：http: //jsfiddle.net/F6D6U/6/

html:

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

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

js：

function cartItem(q, p, a) {
    var self = this;
    self.quantity = ko.observable(q);
    self.price = p;
    self.parentArray = a;

    self.subTotal = ko.computed(function() {        
        var subtotal =  parseFloat(self.price,10) * parseFloat(self.quantity(),10);
        self.parentArray.valueHasMutated();
        return subtotal;
    },self);
}


function shoppingcart() {
    var self = this;
    self.cartItems = ko.observableArray();
    self.cartItems([
        new cartItem(10,100, self.cartItems),
        new cartItem(1,3, self.cartItems),
    ]);
    self.grandTotal = ko.computed(function() {
        var total = 0;
        ko.utils.arrayForEach(self.cartItems(), function (item) {
            total += item.subTotal();
        });
        return total;
    }, self);

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

        ko.applyBindings(new shoppingcart())
于 2013-11-05T17:09:55.153 回答