html 템플릿을 기반으로 항목 배열을 렌더링하기 위해 template.render를 사용하는 곳에 문제가 있습니다. 배열의 각 항목에는 영역의 부모 요소 내에서 다른 템플릿에 바인딩 할 다른 배열이 포함되어 있습니다. 그룹에 그리드 레이아웃을 사용할 수 있다는 것을 알고 있지만 다른 방법으로이 작업을 수행하려고합니다. 다른 컨트롤을 사용하지 않으려 고합니다. 왜 다음 코드가 올바르게 작동하지 않는지 궁금합니다.중첩 된 for 루프를 사용하여 템플릿 바인딩 WinZS
//html templates
<div id="area-template" data-win-control="WinJS.Binding.Template">
<h1 class="area-title" data-win-bind="innerHTML:title"></h1>
<div class="items">
</div>
</div>
<div id="item-template" data-win-control="WinJS.Binding.Template">
<h2 class="item-title" data-win-bind="innerHTML:title"></h2>
</div>
// JS in ready event
var renderer = document.getElementsByTagName('section')[0];
var area_template = document.getElementById('area-template').winControl;
var item_template = document.getElementById('item-template').winControl;
for (var i = 0; i < areas.length; i++) {
var area = areas.getAt(i);
area_template.render(area, renderer).done(function (el) {
var item_renderer = el.querySelector('.items');
for (var j = 0; j < area.items.length; j++) {
var item = area.items[j];
item_template.render(item, item_renderer).done(function (item_el) {
});
}
});
}
그래서 어떻게해야하는지, 그 영역을 렌더링 후 "완료"로, 그때는 ".items는"사업부는를 추가입니다 찾는거야 새로 만든 요소 얻는다 반환 (엘) 기능이다 ~에 항목. 그러나 이렇게하면 생성 된 첫 번째 div에 모든 항목이 추가됩니다. 마지막 div 인 경우 종료로 인해 더 많은 의미가있을 수 있지만 첫 번째 상황에서 발생하는 사실은 실제로 나를 내쫓고 있습니다!
area_template.render(area, renderer).done(function (el) {
var item = area.items[j];
var h2 = document.createElement('h2');
h2.innerText = item.title;
el.appendChild(h2);
}
나는했습니다 있지만 (영역의 수행 렌더링에) : 재미있는 무엇
, 그것은 예를 들어 제대로 표시하지, 내가 대체 할 경우 내 템플릿 document.createElement과 el.appendChild를 사용하여 기능을 렌더링이다 이것이 엘을 깨닫고있다. 엘의 실제 div가 아니다.
나는 여기서 무슨 일이 일어날 지 모른다. el의 값이 올바르게 업데이트되고 있지만 el.querySelector는 항상 잘못된 ".items"div를 반환하거나 어딘가에 유지되지만 디버깅은 el이 루프 중에 변경되는 것을 보여줍니다. 어떤 통찰력이라도 대단히 감사하겠습니다.
덕분에