KnockoutJS 템플릿에서 디버깅 문제가 계속 발생합니다.
” items” 라는 속성에 바인딩하고 싶지만 템플릿에서 오타를 만들고 (기존이 아닌) 속성 ” item“에 바인딩한다고 가정합니다 .
Chrome 디버거를 사용하면 나에게만 알려줍니다.
"item" is not defined.
바인딩 문제에 대한 자세한 정보를 얻는 데 도움이되는 도구, 기술 또는 코딩 스타일이 있습니까?
답변
특정 범위에서 사용 가능한 데이터에 문제가있을 때 자주 수행하는 한 가지는 템플릿 / 섹션을 다음과 같이 바꾸는 것입니다.
<div data-bind="text: ko.toJSON($data)"></div>또는 약간 더 읽기 쉬운 버전을 원할 경우 :
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>이렇게하면 해당 범위에 바인딩 된 데이터가 튀어 나와서 제대로 중첩되는지 확인할 수 있습니다.
업데이트 : KO 2.1 기준으로 다음과 같이 단순화 할 수 있습니다.
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>이제 인수가에 전달되었습니다 JSON.stringify.
답변
개발에 Chrome을 사용하는 경우 개발자 도구의 요소 패널에 직접 바인딩 컨텍스트를 표시하는 Knockoutjs 컨텍스트 디버거 라는 정말 훌륭한 확장 기능이 있습니다.
답변
JavaScript 라이브러리 파일 어딘가에 bindingHandler를 한 번 정의하십시오 .
ko.bindingHandlers.debug =
{
init: function(element, valueAccessor)
{
console.log( 'Knockoutbinding:' );
console.log( element );
console.log( ko.toJS(valueAccessor()) );
}
};단순히 다음과 같이 사용하십시오.
<ul data-bind="debug: $data">장점
- 요소 패널에 표시 와 같이 Chrome 디버거의 모든 기능을 사용하십시오.
- 디버깅을 위해 DOM에 커스텀 요소를 추가 할 필요가 없습니다.
답변
도움이 될 수있는 다른 것을 찾았습니다. 바인딩을 디버깅하고 Ryans 예제를 사용해 보았습니다. JSON이 순환 루프를 발견했다는 오류가 발생했습니다.
<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
<li>
<pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 2)"></pre>
<a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
</li>
</ul>그러나이 방법을 사용하면 데이터 바인드 값이 다음으로 대체되었습니다.
<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
<li>
<pre data-bind="text: 'click me', click: function() {debugger}"></pre>
<a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
</li>
</ul>이제 크롬 디버그 창이 열려있는 동안 PRE 요소를 클릭하면 멋지게 채워진 범위 변수 창이 나타납니다.
좀 더 나은 방법을 찾았습니다.
<pre data-bind="text: ko.computed(function() { debugger; })"></pre>답변
단계별 가이드
- 이 가이드에서는 공식 KnockoutJS 예제 중 하나를 사용 합니다.
- 두 번째 연락처 (Sensei Miyagi) 뒤에있는 데이터를보고 싶다고 가정 해 봅시다.
- 두 번째 연락처의 첫 번째 입력 상자 ( ‘Sensei’텍스트가있는 입력 상자)를 마우스 오른쪽 단추로 클릭하십시오.
- ‘요소 검사’를 선택하십시오. Chrome 개발자 툴바가 열립니다.
- JavaScript 콘솔 창을여십시오.
>=Chrome 개발자 툴바의 왼쪽 하단에 있는 아이콘 을 클릭 하거나 Chrome 개발자 툴바에서 ‘콘솔’탭을 열거 나 Ctrl+ Shift+ 를 눌러 콘솔에 액세스 할 수 있습니다.J - 다음 명령을 입력하고 Enter를 누르십시오.
ko.dataFor($0) - 이제 두 번째 행에 바인딩 된 데이터가 표시됩니다. 객체 왼쪽의 작은 삼각형을 눌러 객체 트리를 탐색하여 데이터를 확장 할 수 있습니다.
- 다음 명령을 입력하고 Enter를 누르십시오.
ko.contextFor($0) - 이제 루트와 모든 부모를 포함하여 전체 녹아웃 컨텍스트가 포함 된 복잡한 객체를 볼 수 있습니다. 복잡한 바인딩 표현식을 작성하고 다른 구문을 실험하려고 할 때 유용합니다.
이 흑 마법은 무엇입니까?
이 트릭은 Chrome의 $ 0- $ 4 기능 과 KnockoutJS의 유틸리티 방법 의 조합입니다 . 즉, 크롬을 사용하면 Chrome 개발자 도구 모음에서 선택한있는 요소를 기억하고 별칭에서 이러한 요소를 노출 $0, $1, $2, $3, $4. 브라우저에서 요소를 마우스 오른쪽 버튼으로 클릭하고 ‘요소 검사’를 선택하면이 요소가 자동으로 별칭 아래에서 사용 가능해집니다 $0. 이 트릭을 KnockoutJS, AngularJS, jQuery 또는 기타 JavaScript 프레임 워크와 함께 사용할 수 있습니다.
트릭의 다른 측면은 KnockoutJS의 유틸리티 메소드 ko.dataFor 및 ko.contextFor입니다.
ko.dataFor(element)-요소에 바인딩 할 수있는 데이터를 반환ko.contextFor(element)-DOM 요소에 사용 가능한 전체 바인딩 컨텍스트를 리턴합니다.
Chrome의 자바 스크립트 콘솔은 모든 기능을 갖춘 자바 스크립트 런타임 환경입니다. 즉, 변수를 보는 것에 만 국한되지 않습니다. ko.contextFor콘솔에서 직접 뷰 모델 의 출력을 저장 하고 조작 할 수 있습니다 . 시도 var root = ko.contextFor($0).$root; root.addContact();하고 어떻게되는지 보십시오 🙂
행복한 디버깅!
답변
내가 사용 하는 정말 간단한 것을 확인하십시오 .
function echo(whatever) { debugger; return whatever; }또는
function echo(whatever) { console.log(whatever); return whatever; }그런 다음 html에서 다음을 수행했습니다.
<div data-bind="text: value"></div>그냥 교체하십시오
<div data-bind="text: echo(value)"></div>더 고급 :
function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }
<div data-bind="text: echo([$data, $root, $parents, $parentContext], 'value')"></div>즐겨 🙂
최신 정보
또 다른 성가신 것은 정의되지 않은 값에 바인딩하려고 할 때입니다. 위의 예에서 데이터 객체가 {값이 아닌 {} : ‘일부 텍스트’}라는 것을 상상해보십시오. 이 경우 문제가 발생하지만 다음과 같이 조정하면 문제가 없습니다.
<div data-bind="text: $data['value']"></div> 답변
이러한 오류를 시각화하기 위해 knockthrough.js라는 github 프로젝트를 만들었습니다.
https://github.com/JonKragh/knockthrough
바인딩 오류를 강조 표시하고 해당 노드의 데이터 컨텍스트 덤프를 제공합니다.
여기 샘플로 재생할 수 있습니다 : http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm
RP Niemeyer의 훌륭한 녹아웃 코드 샘플은이 점을 알려줍니다.
