Hotcakes Commerce DrillDownビューモデルを拡張する

Question

私はHCの1.10.3を使用しています。ドリルダウンビューのViewModelを拡張しようとしています。私はそれをチェックし、必要に応じてビューにいくつかのHTMLを追加できるように、製品に新しいブール値のプロパティを追加したいと思います。 Category.jsの内部では、データをループして新しいプロパティをViewModelに追加して、Viewで使用できるようにしました。ループは私が問題を抱えている場所です。コードをデバッグすると、ループは期待どおりにプロパティを追加しますが、ページのロードが完了してソースをチェックすると、Jsonオブジェクトには何も変更がありません。

function HcDrillDownFilterViewModel(data, $form, catId, modId) { 
var DECIMAL_SEP = "."; 
var self = this; 

for (var i = 0; i < data.Products.length; i++) { 
    var p = data.Products[i]; 
    if (p.ProductName.toLowerCase().indexOf('nike') > -1) { 
     p.NikeBrand = true; 
    } else { 
     p.NikeBrand = false; 
    } 
} 
    // Binding 
    self.model = ko.observable(); 
    self.minPrice = ko.observable(data.SelectedMinPrice); 
    self.maxPrice = ko.observable(data.SelectedMaxPrice); 

これらの変更をViewModelに適用するには、何が欠けているかに関するアイデアはありますか？

Answer 1

あなたが取り組んでいるのは、KnockoutJSがどのように動作するかというわずかな学習曲線です。多くのバインディングやその他のものが動作するフレームワークなので、それを扱う必要があります。しばしば、生のJSスニペットが期待どおりに機能しない可能性があります。

私はKOにはあまり精通していないので、私はほとんどこの見方に触れませんが、私はあなたの質問に基づいて概念実証を得ることができました。

まず、コード内で配列オブジェクトを更新していますが、ビューにバインドする場所の1つでのみ更新しています。それは2つの場所で行う必要があります。これが、更新が適用されていない主な理由です。

元のスニペットの代わりに、私はこの呼び出しを同じJSファイルで作成したメソッドに置きました。

// update Products how you'd like 
data.Products = parseProducts(data.Products); 

その後、私はhandleDrillDown()関数の先頭でも同じでした。

// this needs to get called here too 
data.Products = parseProducts(data.Products); 

は今、これを行うには良い方法があるかもしれませんが、このファイルの最終更新はあなたが下記を参照機能を追加することによって、すべての作業を行いました。私の場合は、すぐに使えるサンプル製品を使って、Brown Fedoraをチェックしました。ノックアウトが提供する組み込みのforeachを使用していることに気づくでしょう。フレームワークを使うときはいつでもこれを行うべきです。

function parseProducts(products) { 
    // instantiate a local array of products to work with 
    var arrProducts = products; 
    // loop through and apply your changes 
    ko.utils.arrayForEach(arrProducts, function (p) { 
     // check your condition 
     if (p.ProductName.toLowerCase().indexOf("fedora") > -1) { 
      p.CoolHat = true; // new property that wasn't there before 
     } else { 
      p.CoolHat = false; // new property that wasn't there before 
     } 
    }); 
    // send back the new array 
    return arrProducts; 
} 

最後に、私は、製品名の後に、このスニペットを追加することで、期待通りの私の変更が反映されていたかどうかを確認するためにドリルダウンカミソリビューのマークアップを更新しました。

<span data-bind="if: CoolHat" style="font-weight:bold; color: red;">This is a really cool hat!</span> 

この結果、このテキストでは「Fedora」のみが「タグ付き」になっていました。