烤饼商务部扩展详细视图视图模型(Hotcakes Commerce Extending the Dr

我使用的HC v 1.10.3，我想扩展视图模型的向下钻取视图。 我想一个新的布尔属性添加到产品，这样我可以检查它，并添加一些HTML的观点是必要的。 所以Category.js里面我想我会遍历数据，以及新的属性添加到视图模型，以便它可以在视图中使用。 环路就是我有一个问题。 当我调试的代码，循环增加了预期的属性，但是当网页加载完成，我检查源，没有任何修饰的存在于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);

什么我缺少获得这些变化使坚持到视图模型的任何想法？

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样品产品。 您还会注意到，我使用的是内置的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的是越来越“标记”这段文字。

文章来源: Hotcakes Commerce Extending the DrillDown ViewModel