javascript - 在另一个上下文中使用计算可观察量的实际示例

Question

我在网上搜索了一段时间，找到了一个使用 Knockout js 计算可观察功能将 owner 属性设置为除根上下文之外的另一个上下文的示例。

问题是我正在尝试访问根计算属性上的 foreach 当前上下文，以便借助主虚拟机上的一个属性来计算 product.finalPrice 属性，如下所示:

var product = function(){
  this.finalPrice = ko.observable(0); // setting its value on the main vm.
}; 

var mainVM = function(){
    this.taxRate = ko.observable(0.18); // tax property that is involoved on product price.
    this.CalculateFinalPrice = ko.computed({
    read:function(){....}, // reading value from current product context.
    write:function(value){....},
    owner: // I want to set the current foreach binding context here in order to change current product final price here.

   });
};

如果您有任何其他想法可以使用其他技术来实现该概念，请列出它。

提前致谢!

Answer 1

我认为你不需要担心所有者是谁。我也不认为你应该尝试修改产品的价格，因为你不知道你是否已经这样做了。每次访问计算属性时，您都会一次又一次应用税率。

如果您的 mainVM 中有一个可观察的 product 数组，那么它可以保持原样。但是，如果每个产品都知道 mainVM 的税率，那么它就可以计算出自己的最终价格。在本示例中，我使用了中介者将税率从 mainVM 链接到每个产品。然后您可以随时访问任何产品的未税价格或已税价格:

var taxMediator = new ko.subscribable();

var product = function(initialPrice) {
    var self = this;
    self.taxRate = ko.observable(0);

    taxMediator.subscribe(function(newValue) {
        self.taxRate(newValue);
    }, self, "updated");

    self.price = ko.observable(initialPrice);

    self.finalPrice = ko.computed(function() {
        return (+self.price() * (1 + +self.taxRate())).toFixed(2);
    });
}; 

var mainVM = function(){
    var self = this;

    self.taxRate = ko.observable(0);

    self.taxRate.subscribe(function(newValue) {
        taxMediator.notifySubscribers(newValue, "updated");
    });

    self.products = ko.observableArray((function() {
        return [
            new product(100),
            new product(300),
            new product(50)
        ];
    })());
};

ko.applyBindings(new mainVM());

您可以看到working jsFiddle demonstration here 。