带有嵌套 for 循环 WinJS 的模板绑定

Question

我遇到了一个问题，我使用 template.render 来渲染基于 html 模板的项目数组。数组中的每个项目还包含另一个数组，我想在该区域的父元素内绑定到另一个模板。我知道我可以为组使用网格布局，但我正在尝试以另一种方式完成此操作，所以请不要建议使用不同的控件，我只是好奇为什么以下内容无法正常工作。

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

虽然我已经意识到这是将它附加到的 el，而不是 el 的实际 .items div

我不太确定这里会发生什么。看起来 el 的值正在正确更新，但是 el.querySelector 要么总是返回错误的“.items” div，要么它被保留在某个地方，但是调试确实表明 el 在循环期间发生了变化。任何见解将不胜感激。

谢谢

Answer 1

我已经弄清楚这里发生了什么。渲染承诺中返回的“el”不是我想的新创建的元素。它是渲染器和新创建的 html 一起。因此 el.querySelector('.items') 总是带回它找到的第一个 '.items'。我一定是误读了文档，但希望其他人会发现此信息在遇到相同错误时很有用。

我想解决这个问题的一种方法是执行 item_rendered = el.querySelectorAll('.items')[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);
                    }
                });
            }