扩展DrillDown ViewModel的热蛋糕商业

Question

我使用的是HC的v1.10.3，我试图为钻取视图扩展ViewModel。我希望在产品中添加一个新的布尔属性，这样我就可以检查它，并在必要时向视图添加一些html。因此，在Category.js内部，我想循环遍历数据，并将新属性添加到ViewModel中，以便可以在视图中使用。循环是我遇到问题的地方。调试代码时，循环按预期添加属性，但当页面完成加载并检查源时，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也不是很熟悉，但是我设法得到了基于你的问题的概念工作的证明。

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

我把这个调用放到了我在同一个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);

现在，可能有更好的方法来做到这一点，但是这个文件中的最后更新通过添加下面看到的函数完成了所有的工作。在我的例子中，我使用的样本产品是从盒子里出来的，只需检查一下褐色的Fedora。您还会注意到，我正在使用Knockout提供的内置程序。无论何时使用框架，都应该这样做。

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

最后，我更新了drilldown视图标记，以查看我的更改是否如我所期望的那样被反映出来，方法是在产品名称后面添加这个片段。

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

其结果是，只有Fedora被“标记”了这个文本。

​

​