Backbone Marionette CompositeView를 사용하여 만든 간단한 테이블이 있습니다. 이 표의 유일한 요구 사항은 데이터를 표시하고 사용자가 헤더 행을 클릭하여 정렬 할 수있게하는 것입니다. 표를 정렬 할 때 헤더 열을 정렬하는 데 사용되는 열에는 CSS (예 : 'class = "sort asc"')를 사용하여 화살표를 표시 할 수 있도록 클래스가 태그로 지정됩니다.백본 Marionette CompositeView "Event Zombie"
여기에 문제가 있습니다. 헤더 행을 클릭하면 콜백에 전달되는 요소 (event.target을 통해)는 DOM에있는 테이블의 일부가 아닙니다. 대신 Chrome의 디버깅 도구를 사용하면 대상 요소가 실제로 템플릿 스크립트 블록의 일부이며 사용자가 실제로 보는 요소가 아닌 것처럼 보입니다.
지금 당장 가장 좋은 방법은 템플릿의 복제본에서 고유 한 정보를 검색하여 DOM에 실제로 연결된 요소를 조회하는 것입니다.
여기 복합 뷰 코드이다 (하나 빌린 Derick 베일리 샘플 바이올린의)
// The grid view
var GridView = Backbone.Marionette.CompositeView.extend({
tagName: "table",
template: "#grid-template",
itemView: GridRow,
events: {
'click th': 'doSort'
},
doSort: function(event) {
var target = $(event.target);
this.collection.sortByField(target.data('sortby'));
target.parent('tr').find('.sort').removeAttr('class');
target.addClass('sort ' + this.collection.sortdir);
debugger; // NOTE: no change to elements in the DOM. WTH?
target = this.$('[data-sortby=' + target.data('sortby') + ']');
target.parent('tr').find('.sort').removeAttr('class');
target.addClass('sort ' + this.collection.sortdir);
debugger; // NOTE: DOM updated.
},
appendHtml: function(collectionView, itemView) {
collectionView.$("tbody").append(itemView.el);
}
});
템플릿 간단한 물론이다
<script id="grid-template" type="text/template">
<thead>
<tr>
<th data-sortby="username">Username</th>
<th data-sortby="fullname">Full Name</th>
</tr>
</thead>
<tbody></tbody>
</script>
로 변성 데릭 원래 데모 바이올린 포크 문제는 여기에 나와 있습니다. http://jsfiddle.net/ccamarat/9stvM/14/
나는 약간 구불 구불 렀다. 제 질문은 좀비보기가 생겼습니다. 이것은 jQuery/Backbone/Underscore 버그입니까? 아니면이 모든 잘못에 대해 간단히 말합니까?
** 수정 ** 다음은 두 요소의 다른 상위 계층 구조를 보여주는 콘솔 출력입니다 :
console.log(target, targetb):
[<th data-sortby="username" class="sort asc">Username</th>] [<th data-sortby="username">Username</th>]
console.log(target.parents(), targetb.parents()):
[<tr>…</tr>, <thead>…</thead>] [<tr>…</tr>, <thead>…</thead>, <table>…</table>, <div id="grid">…</div>, <body>…</body>, <html>…</html>]
console.log(target === targetb):
false
문제/문제에 대해 더 구체적으로 설명 할 수 있습니까?몇 가지 잠재적 인 문제를 매우 자세하게 언급했지만, 좀비보기와 관련하여 세부 사항없이 하나의 매우 짧은 질문 만하십시오. 어떤 문제를 해결하려고합니까? 왜 좀비보기가 있다고 생각하니? 어떤 좀비가 보입니까? –
도 - 최신 버전의 Chrome에서 예를 들어 실행했습니다. 제대로 작동합니다. 당신이 DOM이 업데이트되지 않았다는 코멘트는 ... 실행했을 때 그 시점에서 업데이트되었습니다. 어떤 브라우저/버전을 사용하고 있습니까? –
나보다 한 가지 이상의 문제가있는 것 같으면 나 자신을 설명하는 일이 불쌍한 것입니다. 유일한 문제는 내가 좀비보기라고 부르는 것입니다. 내가 그것을 부른 이유는 적어도 나의 셋업에서, 첫 번째 중단 점 (event.target을 사용)에서 업데이트 된 요소는 두 번째 요소와 동일한 것이 아니라 * $ el.find ()). 저는 최신 버전의 Chrome을 사용하여 테스트 중이며 두 대의 다른 컴퓨터에서 두 번 복제 할 수있었습니다. –