Knockout Visible Binding 사용방법_기본지식

간단한 바인딩

먼저 ViewModel을 정의합니다

코드 복사 코드는 다음과 같습니다.

var AppViewModel = {
shouldShowMessage: ko.observable(true) ///초기화 중에 div가 표시됩니다.
};

AppViewModel.shouldShowMessage = ko. observable(false); ///이제 숨겨졌습니다
ko.applyBindings(AppViewModel);

ko.applyBindins를 통해 Knockout을 활성화합니다.
그런 다음 UI 인터페이스 요소를 정의합니다.

코드를 복사합니다. 코드는 다음과 같습니다.

"shouldShowMessage"가 참 값을 보유하는 경우에만 이 메시지가 표시됩니다.

이 div를 실행한 후에도 초기화 중에 계속 표시될 수 있지만 false로 다시 할당되어 div가 숨겨집니다.
매개변수:
매개변수가 false 값(예: 부울 값 false, 숫자 값 0, null 또는 정의되지 않음)으로 설정된 경우 바인딩은 요소의 style.display 값을 없음으로 설정합니다. , 요소가 숨겨지도록 합니다. CSS에서 정의한 표시 스타일보다 우선순위가 높습니다.
매개변수가 true 값으로 설정된 경우(예: 부울 값 true, null이 아닌 객체 또는 배열) 바인딩은 요소의 style.display 값을 삭제하고 요소를 표시합니다. 그러면 CSS에서 사용자 정의한 표시 스타일이 자동으로 적용됩니다.
매개변수가 관찰 가능한 모니터링 속성인 경우 매개변수 값의 변경에 따라 요소의 표시 상태가 변경됩니다. 그렇지 않은 경우 요소의 표시 상태는 한 번만 설정되며 업데이트되지 않습니다. 미래.
함수나 표현식을 사용하여 요소의 가시성을 제어하세요.
JavaScript 함수나 표현식을 매개변수로 사용할 수도 있습니다. 이 경우 함수 또는 표현식의 결과에 따라 요소 표시/숨기기 여부가 결정됩니다. 예:

코드 복사 코드는 다음과 같습니다.

ViewModel에 myValues의 속성값을 추가합니다
동시에 항목을 배열에 추가합니다. myValues
및 An 요소

는 페이지 UI에 바인딩됩니다. 코드는 다음과 같습니다. 🎜>

 

이 메시지는 'myValues'에 구성원이 하나 이상 있는 경우에만 표시됩니다.

이런 방식으로 "일부 값" 요소인 myValues().length>0을 추가한 후 결과는 true입니다.

그러면 이 div가 표시됩니다.