模板與嵌套for循環綁定WinJS

我有一個問題，我使用template.render呈現基於html模板的項目數組。數組中的每個項目還包含另一個數組，我想要綁定到該區域的父元素內的另一個模板。我知道我可以爲組織使用網格佈局，但我試圖以另一種方式完成此任務，所以請不要使用其他控件的建議，我只是好奇爲什麼以下方面無法正常工作。模板與嵌套for循環綁定WinJS

//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) { 
         }); 
        } 
       }); 
      }

那麼會發生什麼，是它使該地區後，在「完成」功能的新創建的元素（EL）得到恢復，我然後找到它的「.items」的div追加項目。但是，這會將所有項目追加到創建的第一個div。如果它是最後一個div，它可能因閉包而變得更有意義，但它發生在第一個div上的事實真的讓我失望！

有趣的是，如果我代替我的模板使用使用document.createElement和el.appendChild渲染功能，它正確地顯示確實如：（在該地區進行渲染）

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); 
}

儘管我意識到這是它附加到它，而不是實際的.items div的el

我不太確定這裏可能會發生什麼。看來el的值正在被正確更新，但是el.querySelector要麼總是返回錯誤的「.items」div，要麼被保留在某個地方，但是調試確實表明el在循環過程中正在改變。任何有識之士將不勝感激。

感謝

來源

2012-11-24 TommyBs

我已經制定了這是怎麼回事。按照我的想法，渲染承諾中返回的「el」不是新創建的元素。它是渲染器和新創建的html。因此，el.querySelector（'。items'）總是帶回它找到的第一個'.items'。我一定誤解了文檔，但希望別人會發現這些信息有用，以防他們有相同的錯誤。

我想圍繞這一方法是做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); 
        } 
       }); 
      }

來源

2012-11-24 20:27:39 TommyBs

模板與嵌套for循環綁定WinJS

回答

相關問題