Hotcakes Commerce 扩展 DrillDown ViewModel

Question

我使用的是 HC 的 v 1.10.3，我正在尝试扩展 ViewModel 以用于向下钻取视图。我想向产品添加一个新的布尔值属性，以便我可以检查它并根据需要向视图添加一些 html。所以在 Category.js 内部，我想我会遍历数据，并将新的属性添加到 ViewModel，以便它可以在 View 中使用。循环是我遇到问题的地方。当我调试代码时，循环会按预期添加属性，但是当页面加载完成并且我检查源代码时，Json 对象中存在 none 修改。

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，但我设法根据你的问题得到了一个概念验证。

首先，在您的代码中，您正在更新数组对象，但您只是在绑定到视图的其中一个地方更新它。它需要在两个地方完成。这是您没有看到应用更新的主要原因。

代替您的原始代码段，我已将此调用放到我在同一个 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。您还会注意到我正在使用 Knockout 提供的内置 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;
}

最后，我更新了向下钻取 Razor 视图标记，通过在产品名称后添加此代码段来查看我的更改是否按预期反映。

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

结果是只有 Fedora 得到了 "tagged" 这个文本。

Hotcakes Commerce 扩展 DrillDown ViewModel

Hotcakes Commerce Extending the DrillDown ViewModel

e-commerce

knockout.js