Hotcakes Commerce DrillDown 확장 ViewModel

Question

저는 HC의 1.10.3 버전을 사용하고 있으며 드릴 다운 뷰의 ViewModel을 확장하려고합니다. 제품에 새로운 불린 (boolean) 속성을 추가하여 체크하고 필요에 따라 뷰에 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에 대해 잘 알고 있지 않기 때문에 거의이 견해를 만지지는 못했지만 질문에 따라 개념 증명 작업을 할 수있었습니다.

먼저 코드에서 배열 객체를 업데이트하지만 뷰에 바인딩되는 위치 중 하나에서만 업데이트합니다. 두 곳에서해야합니다. 이것이 업데이트 적용이 보이지 않는 주된 이유입니다.

원본 스 니펫 대신이 호출을 동일한 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; 
} 

마지막으로, 나는 제품 이름 다음에이 코드를 추가하여, 예상대로 내 변경 내용이 반영되었는지 확인하기 위해 드릴 다운 면도기보기 마크 업을 업데이트했습니다.

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

그 결과 Fedora만이이 텍스트로 "태그 지정"되었습니다.