Knockout.js를 사용하여 배열의 인스턴스 카운트

Question

방금 ​​Knockout.Js를 사용하기 시작했으며 기본적인 것들로 생각하기에 조금 어려움을 겪었습니다. 가장 성가신 것은 관찰 가능한 배열 내에서 문자열의 고유 한 인스턴스의 수를 얻고 ui로 인쇄하려고합니다.

특히 '호텔 유형'필드가있는 호텔 모델이 있습니다. 'B & B'또는 'All-inclusive'등입니다.이 호텔 유형의 고유 한 목록을 체크 박스로 표시하고 observableArray에 다시 바인딩했습니다. 이 배열은 표시된 호텔 목록을 필터링하는 데 사용됩니다. 그러나 내가 할 수없는 것은 배열 내의 각 카테고리 유형 (예 : 50 개 호텔, 40 B & B 등)을 제공합니다.

나에게 일어나는 유일한 방법은 Compute에서 새 필드를 만들고 arrayFilter를 사용하여 필터링 된 배열의 길이를 가져 오는 것입니다. 이것은 매우 비싸고 지저분 할 것입니다.

더 간단한 방법이 있습니까?

Answer 1

당신이 묘사 한 바에서 나는 다른 접근 방식을 제안합니다. hotelType을 문자열에서 응용 프로그램의 적절한 부분으로 업그레이드하는 것이 좋습니다. 예를 들어, hotel과 $root (또는 호텔 목록) 사이에있는 ViewModel로 만들 수 있습니다. 본질적으로 호텔 목록은 hotelType을 기준으로 그룹화 된 목록이됩니다.

var data = { 
    allHotels : [{ 
      hotelType : "B&B", 
      hotels : [{name: "West Inn", chosen: false}, 
        {name: "East Inn", chosen: true}] 
     },{ 
      hotelType : "All-inclusive", 
      hotels : [{name: "North Inn", chosen: false}, 
        {name: "Center Inn", chosen: false}, 
        {name: "South Inn", chosen: false}] 
    }]}; 

이 매우 쉽게 유형별 호텔의 수에 수를 가지고 할 것입니다 :

다음 JSON

는 제가 이야기 구조를 제안한다. 그것은 당신의보기에 이런 식으로 뭔가를 할 것이다 :

<ul data-bind="foreach: allHotels"> 
    <li> 
     <span data-bind="text: hotelType"></span> 
     (<span data-bind="text: hotels().length"></span>) 
     ...foreach: hotels here... 
    </li> 
</ul> 

내가 제안하고있는 무슨의 데모 this jsfiddle에서보세요.

호텔의 총계는 또한 쉽습니다 : 호텔 유형의 총 합계. 합계는 필요할 때마다 업데이트됩니다 : 관련 컬렉션에서 항목이 제거/추가 된 경우.