녹아웃 데이터 바인딩 브라우저 도구

Question

브라우저 도구에서 데이터 바인딩 속성을 트리거하려면 어떻게해야합니까? 아래 예제에서 브라우저 도구에서 showDiv을 true 또는 false로 설정하려면 어떻게해야합니까?

<div data-bind="visible:showDiv">Text</div> 

Answer 1

,이 같은 콘솔에서 관측 값을 설정할 수 있습니다

이

viewModel.showDiv(true); 

Answer 2

브라우저 도구에서 수행해야 할 실제 요구 사항이 있습니까? 테스트 용이라면 뷰 모델의 함수를 호출하여 값을 토글하는 버튼을 만들 수 없습니까? 당신의 ViewModel에서

(당신이 showDiv에 대한 관찰이 가정) :

var self = this; 

self.showDiv = ko.observable(true); 

self.toggleDiv = function() { 
    self.showDiv(!self.showDiv()); 
} 

다음 :

<div data-bind="visible:showDiv">Text</div> 
<input type="button" value="Toggle" data-bind="click: toggleDiv" /> 

예에서 : JSFiddle

그렇지 않으면 난 그냥 좋겠 JS 파일에 중단 점을 작성하고 콘솔을 사용하십시오. 그것의 가치를 바꾸는 것. 명시 적으로 코드에 값을 설정합니다 것처럼

Answer 3

첫째, 당신은 데이터 바인딩을 트리거하지 않습니다, 당신은을 트리거 할 수 있습니다

귀하의 예제에서

, 당신은 그 관찰을 업데이트 할 때마다, showDiv는 관찰 할 수 있다고 가정, 데이터 바인드 내부 바인딩 처리기 관찰 바운드, 그것은 당신의 데이터 바인딩에 visible 바인딩 핸들러의 업데이트 방법을 트리거합니다 . 지금

은 일반적인 방법으로 만 경우에 한정되지, 가장 간단한 방법은 ko.dataFor 또는 중 하나와 함께, 당신에게 마지막으로 검사 한 DOM 요소를 얻을 것이다 개발자 도구에서 $0 바로 가기 (크롬 & 파이어 폭스)의 사용을 확인하는 것입니다 ko.contextFor 메소드에서 DOM 요소를 인수로 허용합니다.

당신이 페이지에 표시되는 모든 요소에 대한 기본 뷰 모델을 참조하고, (그들이 관찰 가능한있는 경우)보기 모델의 속성을 업데이트 할 때마다, 다음을 수행하십시오

이

1. 는 개발자를 열을 도구
2. 지금

3. (당신이 그것을 검사하고 나면, 그것은 $0 수 변수로 콘솔에서 사용할 수) 원하는 DOM 요소를 검사하면 ko.dataFor($0)

   ,691를 사용하여 해당 DOM 요소 뒤에 기본 뷰 모델을 얻을 수 있습니다더 복잡한 시나리오에서

   ko.dataFor($0).showDiv(true); // your div is visible 
   ko.dataFor($0).showDiv(false); // not visible 
   

(뷰 모델을 중첩 한 경우 foreach는 내부 또는), 당신은 사용 할 수 있습니다 ko.contextFor($0)