녹아웃 성능 - 관찰 가능한 배열 필터링

Question

저는 Knockout을 처음 접했고 시스템의 사용자와 각 사용자의 역할을 보여주는 페이지에서이를 사용하려고합니다.

데이터는 사용자의 observableArray입니다. 사용자 개체의 역할 속성은 observableArray입니다. 이 두 번째 배열에는 ID와 부울 "수락"속성을 가진 각 역할에 대한 개체가 포함되어 있습니다.

특정 역할을 가진 모든 사용자를 표시 할 수 있기를 원하므로 각 역할에 대한 확인란이 있습니다.이 중 하나를 선택하면 목록에 해당 역할이있는 사용자가 표시됩니다.

내가 겪고있는 문제는 1,000 명 정도의 사용자를 역할별로 필터링하는 데 몇 초가 걸렸습니다. 이름의 텍스트 필터링은 매우 빠르고 (수 밀리 초) 역할에 의한 필터링은 아닙니다. 일부 타이밍 코드를 넣었습니다. 문제는 사용자가 선택한 역할을 갖고 있는지 확인하기 위해 사용하는 방법입니다. 그래서 더 나은 방법이 있는지, 어쩌면 일부 녹아웃을 사용하고 있는지 궁금 할 것입니다. 마법.

다음은 필터링을 수행하는 데 사용하는 뷰 모델에 ko.computed입니다. 결과 테이블은이 함수에 바인딩됩니다.

self.filteredUsers = ko.computed(function() { 

    var textFilter = self.filter();   // this is an observable bound to a text field 
    var checkedRoles = self.selectedRoles(); // this is a computed, which returns an array of checked roles 

    return ko.utils.arrayFilter(self.users(), function (user) { 

     var match = true; 

     if (user.displayName.toLowerCase().indexOf(textFilter.toLowerCase()) == -1) { 
      match = false; 
     } 

     // for each ticked role, check the user has the role 
     for (var i = 0; i < checkedRoles.length; i++) { 
      var roleMatch = false; 
      for (var j = 0; j < user.roles().length; j++) { 
       if (user.roles()[j].roleId === checkedRoles[i].roleId && user.roles()[j].granted()) { 
        roleMatch = true; 
        break; 
       } 
      } 
      if (!roleMatch) { 
       match = false; 
      } 
     } 

     return match; 
    }); 
}); 

Answer 1

좋은 최적화는 사용자 개체에서 계산 된 grantedRoles을 생성한다고 생각합니다. 이 계산은 인덱스로 사용할 수있는 객체를 반환하고 역할의 고유 식별자로 키가 지정된 속성을 포함하며 부여 된 역할 만 포함합니다.

filteredUsers에서 확인 된 각 역할에 대해 user.roles()을 반복하지 않고 grantedRoles 개체를 확인 된 각 역할에 대해 확인하십시오.