knockout.js
knockout.js 응용 프로그램 디버깅

DOM 요소의 바인딩 컨텍스트 확인

녹아웃 데이터 바인딩의 많은 버그는 뷰 모델의 정의되지 않은 속성에 의해 발생합니다. Knockout에는 HTML 요소의 바인딩 컨텍스트 를 검색하는 두 가지 편리한 메서드가 있습니다.

// Returns the binding context to which an HTMLElement is bound
ko.contextFor(element);    

// Returns the viewmodel to which an HTMLElement is bound
// similar to: ko.contextFor(element).$data
ko.dataFor(element);       

UI 요소의 바인딩 컨텍스트를 빠르게 찾으려면 다음과 같은 유용한 트릭을 참조하십시오.

대부분의 최신 브라우저는 현재 선택한 DOM 요소를 전역 변수에 저장합니다. $0 ( 이 메커니즘에 대한 자세한 내용 )

• UI에서 요소를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 "inspect" 또는 "inspect element" 를 선택하십시오.
• 개발자 콘솔에서 ko.dataFor($0) 를 입력하고 Enter 키를 누릅니다.

오브젝트 플러그인을 찾는 데 도움이되는 브라우저 플러그인도 있습니다.

예제 ( knockout hello world 예제 에서 시도해보십시오) :

마크 업에서 바인딩 컨텍스트 인쇄하기

때로는 현재 바인딩을 마크 업에서 직접 인쇄하는 것이 유용합니다. 이를 허용하는 깔끔한 트릭은 존재하지 않는 바인딩 (KO <3.0), 사용자 정의 바인딩 또는 uniqueName 과 관련이없는 바인딩이있는 추가 DOM 요소를 사용하는 것입니다.

다음 예제를 고려하십시오.

<tbody data-bind="foreach: people">
    <tr>
         <td data-bind="text: firstName"></td>
         <td data-bind="text: lastName"></td>
    </tr>
</tbody>

people 배열에서 각 요소의 바인딩 컨텍스트를 찾으려면 다음과 같이 작성할 수 있습니다.

<tbody data-bind="foreach: people">
    <span data-bind="uniqueName: console.log($data)"></span>
    <tr>
        <td data-bind="text: firstName"></td>
        <td data-bind="text: lastName"></td>
    </tr>
</tbody>