Frank-Shanghai
commented
6 years ago 自己实现一个KO observable subscription扩展，可以同时获得new value and old value, 同时允许传递一个dataContext参数以供handler使用。 这个dataContext不同于target， target是指定handler中的this的指向。 //https://stackoverflow.com/questions/12822954/get-previous-value-of-an-observable-in-subscribe-of-same-observable /*
- Extend ko functionality
- https://stackoverflow.com/questions/12822954/get-previous-value-of-an-observable-in-subscribe-of-same-observable
/
ko.subscribable.fn.subscribeChanged = function (callback, dataContext) {
var savedValue = this.peek();
return this.subscribe(function (latestValue) {
var oldValue = savedValue;
savedValue = latestValue;
callback(latestValue, oldValue, dataContext);
});
};
// Use the custom ko observable function subscribeChanged, refer to the file top code for more details about implementation
//https://stackoverflow.com/questions/12822954/get-previous-value-of-an-observable-in-subscribe-of-same-observable
this.orderQuantitySubscriptions.push(order.quantity.subscribeChanged((newValue: any, oldValue: any) => {
this.totalNumber(Number(this.totalNumber()) - Number(oldValue) + Number(newValue));
this.totalPrice(Number(this.totalPrice()) - Number(oldValue order.price()) + Number(newValue * order.price()));
}, null, order));
自己更新了knockout.d.ts加了一个定义：
interface KnockoutSubscribable
extends KnockoutSubscribableFunctions { subscribe(callback: (newValue: T) => void, target: any, event: "beforeChange"): KnockoutSubscription; subscribe(callback: (newValue: T) => void, target?: any, event?: "change"): KnockoutSubscription; subscribeChanged(callback: (newValue: T, oldValue: T) => void, target?: any, dataContext?: any): KnockoutSubscription;
Issue 1: Cause: For specific condition, in the code, it takes the quantity value as string to handle.
Repro step:
Import page, select one product, it's Ok the click the minus or plus button to change quantity. But if you try to type numbers into the text box, it will treat it as string, after you changed the number, and then click plus button again, you will found it just append one '1' to the number as a string. For example, you changed the number to 20, and then click plus button, expected it will be 21, but actually it's 201.
Click "Add" button to add a new order, and then try to change the quantity as described in step 1, the same issue appears. And the same issue for the total quantity and total price on the page bottom.
Issue 2: Change order quantity value by typing won't update the total quantity and price, caused wrong total quantity and price value. It works by clicking minus and plus button because there is code in the click event handler to updated corresponding value. Solution: maybe need to add subscription to every order quantity field, once changed, re-calculate corresponding value.