在淘汰赛 JS (Magento 2) 中使用可观察数组

Question

我正在使用 Knockout JS 执行一些需要在我的视图中显示的基本价格计算。

我传入一个 key => value 数组作为配置，然后我的 javascript 模型对数组进行一些计算并更新它。

所以我可以更新前端，我正在使用ko.observableArray()。

我的模板文件如下所示：

<span>Price $<span data-bind="text: priceCalculator.prices()['<?php echo $block->getSomeKey ?>']"></span></span>

我的 PriceCalculator 模型如下所示：

this.priceMap = priceMap; // from config
this.prices = ko.observableArray();
this.setObservablePrices();


this.setObservablePrices = function () {
    var self = this;
    $.each( this.priceMap, function( key, value ) {
        self.prices()[key] = self.doSomePriceCalc(value);
    });

    return this;
};

问题是，我的模板只显示我的数组中设置的变量的第一个实例。 IE 如果我再次运行this.setObservablePrices(); 并更新价格，它不会反映在我的模板文件中。

我注意到 Knockout JS 说要使用 self.prices().push(value) 但是我不知道是否可以在不丢失数组键的情况下做到这一点？

我尝试了以下方法，但它创建了一个我不想要的 3d 数组：

var price = {};
price[key] = value;
this.prices().push(price);

Answer 1

好的，所以我想通了，我不得不稍微不同地处理它。我没有使用可观察数组，而是在数组中创建了可观察元素：

var self = this;
$.each( this.prices, function( key, value ) {
    self.prices[key] = ko.observable(self.doSomePriceCalc(value));
});


this.setObservablePrices = function () {
var self = this;

    $.each( this.prices, function( key, value ) {
        self.prices[key](self.doSomePriceCalc(value));
    });

return this;
};