2012-11-24 6 views
1

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이 루프 중에 변경되는 것을 보여줍니다. 어떤 통찰력이라도 대단히 감사하겠습니다.

덕분에

답변

1

여기 무슨 일이 일어나고 있는지 알아 근무했습니다. 렌더링 약속에서 반환 된 "el"은 내가 생각한 것처럼 새로 생성 된 요소가 아닙니다. 렌더러와 새롭게 생성 된 html입니다. 따라서 el.querySelector ('. items')는 항상 찾은 첫 번째 '.items'를 반환합니다. 필자는 문서를 잘못 읽었을 것입니다. 그러나 같은 오류가 발생하면 다른 사람이이 정보를 유용하게 사용할 수 있기를 바랍니다.

는 I이 주위 편도 item_rendered = el.querySelectorAll 할 것 같다 ('. 항목') [I] 및

예 루프의 위치에 기초하여 번호 '.items를 이익 환원을

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.querySelectorAll('.items')[i]; 
        for (var j = 0; j < area.items.length; j++) { 
         var item = area.items[j]; 
         var h2 = document.createElement('h2'); 
         h2.innerText = item.title; 
         item_renderer.appendChild(h2); 
        } 
       }); 
      } 
관련 문제