Question

我有一个问题，我正在使用template.render基于html模板呈现项目数组。数组中的每个项目还包含另一个数组，我想在该区域的父元素内绑定到另一个模板。我知道我可以为组使用网格布局，但我正在尝试以另一种方式实现，所以请不要使用不同控件的建议，我只是好奇为什么以下不能正常工作。< / p>

   //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，由于关闭可能会更有意义，但它在第一个上发生的事实真的让我失望了！

有趣的是，如果我使用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的实际.items div

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

感谢

Answer 1

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

我想这方面的一个方法是做item_rendered = el.querySelectorAll（'。items'）[i]并根据循环中的位置返回编号的'.items'

e.g

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

使用嵌套for循环WinJS的模板绑定

1 个答案: