2017-06-22 9 views
0

Knockout JSを使用して、私のビューに表示する必要があるいくつかの基本的な価格計算を行っています。ノックアウトJSで観測可能な配列を使って作業する(Magento 2)

私は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();にもう一度実行すると価格が更新され、テンプレートファイルに反映されません。

ノックアウトJSはself.prices()を使用すると言います。push(value)しかし、私は配列キーを紛失することなくこれを行うことができますか?

私は次のことを試してみましたが、それは私が望んでいない3D配列作成しますので、私はそれを考え出しオーケー

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

答えて

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; 
}; 
+0

うん、observableArrayは、配列の要素を観察し、要素が追加または削除された場合にのみ通知をトリガーします。 – Navarr

関連する問題