KO 계산 UI가 업데이트되지 않았습니다.

Question

저는 녹아웃에 상당히 익숙하며 녹아웃을 사용하여 부트 스트랩 탭을 표시하고 숨기려고합니다.

는 기본적으로 내가 관찰 계산 한 :

self.isActive = ko.computed(function() { 
      var selected = ko.utils.arrayFirst(self.padParticipant(), function (item) { 
       return item.ParticipationStatus == 'Active'; 
      }); 
      return selected !== null ? true : false; 
     }); 

이 탭을 업데이트 할 :

<ul class="nav nav-tabs" id="padTabs"> 
     <li data-bind="fadeVisible: !isActive()"><a href="#joinPad">Join PAD</a></li> 
     <li class="active"><a href="#history">History</a></li> 
     <li data-bind="fadeVisible: isActive()"><a href="#update">Update Subscription</a></li> 
</ul> 

을 계산 된 올바르게 의미에서 작동하는지 내가 올바른 탭이 숨겨져있는 페이지를 새로 고침 할 때, 하지만 나는 상쾌하게 일하지 않고 일해야한다.

Answer 1

관찰 할 수있는 배열의 규칙 외에도 계산 된 관찰 값을 사용할 때 Knockout 프레임 워크에서 어떤 일이 일어나는지를 이해하는 것이 문제입니다.

요점 : 첫 번째의이 관찰 배열에 대한 메모를 살펴 보자 객체 배열에 간단히 말해 observableArray 아무튼에 객체를 넣어 해당 객체

의 없는 상태입니다 observableArray 트랙 해당 객체의 속성 자체를 관찰 할 수 없도록 하십시오. 물론 을 원하면이 속성을 관찰 가능하게 만들 수 있지만 독립적 인 선택입니다. observableArray는 어떤 객체를 추적하며 객체가 추가되거나 제거 될 때 리스너에게 알립니다.

이 배열에있는 개체의 관찰이 아니라 단지 속성이 아니므로이, 당신은 코드이 줄을 만드는 것과 동일한주의 실수, : return item.ParticipationStatus == 'Active';

또한, 우리 계산 된 관찰이 작동하는 방식을 이해해야합니다

1. 당신이이 KO 즉시 초기 값을 얻기 위해 평가자의 기능을 관찰 호출하여 계산 선언 할 때마다

   .

2. 당신의 평가 기능이 실행되는 동안

   , KO은 평가자가의 값을 읽고, 관찰 가능한 (또는 계산 관찰 가능한)의 로그를 유지합니다. 귀하의 평가가 완료

3. , KO는 감동 한 관찰 가능한 (또는 계산 된 관찰 가능한)의 각 구독을 설정합니다. 구독자 콜백 은 평가자가 다시 실행되도록 설정되어 있습니다. 은 전체 프로세스를 1 단계 (다시 적용되지 않는 이전 구독 취소)로 되 돌립니 다.

4. KO는 모든 구독자에게 계산 된 관찰 가능 항목의 새 값을 알립니다. 당신이 만든 경우

그래서 당신의 관찰 계산, 변화를 감시하기 위해 만들어졌습니다 만 가입이 관찰 배열 self.padParticipant() 하나였다.

상태 변경 UI는 ParticipationStatus에 따라 달라 지므로이 속성은 배열의 각 개체 내에서 관찰 가능한 요소 여야 함을 의미합니다. 그렇지 않으면 상태가 변경 될 때 계산 된 개체가 표시 될 방법이 없습니다. 변경 사항을 인식하고 UI를 업데이트하십시오.