Javascript 如何在中继器中动态绑定WinJS列表视图

我有一个WinJS中继器，它使用一个模板。该模板包含一个WinJS列表视图。我似乎不知道如何使用data win bind设置内部列表视图itemDataSource

我的中继器：

<section id="genreView" aria-label="Main content" role="main">
    <div id="genreWrapper">
        <div id="genreRows" data-win-control="WinJS.UI.Repeater"
             data-win-options="{template: select('#genreRowTemplate')}">
        </div>
    </div>
</section>

数据是动态创建的，每个绑定列表实际上包含更多的数据，因此我无法获得真实数据的良好示例

我得到的是一个重复控件，与绑定列表中的记录完全相同。我没有看到的是显示的绑定列表。我的内部绑定列表未通过数据win绑定进行数据绑定。我试过几次，要么什么也没得到，要么就是出了差错。感谢您的帮助。谢谢

---

编辑：我认为正确的绑定方式应该是data-win-bind=“data-win-options.itemDataSource:data”，但这样做会引发以下令人困惑的错误：“JavaScript运行时错误：WinJS.UI.Repeater.AsynchronousRender:顶级项目必须同步渲染”。

我能够解决我的问题，但我觉得我做得不对。我继续为中继器设置了数据源，这给了我上面的genreRows。这一直都是有效的，它只是我不知道如何访问的子数据源。我的解决方案。。。加载后在代码中设置它。没什么特别的，只是一个让我觉得有点不舒服的解决方案。这是我的代码，以防它帮助其他人克服这个问题

var titleList=$（“.genreRow>.genreTitle”）；
var genreLists=$（“.genreRow>.genreMovieListView”）；
for（var i=0；i

基本上，上面的代码假设标题是唯一的（它是唯一的）。所以它使用它作为键来遍历数据，并以此方式设置itemDataSource

---

我不会将此标记为已被接受的答案，以防有人指出如何“正确”执行此操作。

旧问题，但仍然值得一个好答案：

我已经修改了HTML以显示正确的绑定语法

<div id="genreRowTemplate" data-win-control="WinJS.Binding.Template">
<div id="genreRow">
    <h2 class="genreTitle" data-win-bind="innerText: genreTitle"></h2>
    <div class="genreMovieListView"
            data-win-control="WinJS.UI.ListView"
            data-win-bind="winControl.itemDataSource : data.dataSource"
            data-win-options="{ layout: { type: WinJS.UI.GridLayout },
        itemsDraggable: false,
        selectionMode: 'single',
        tapBehavior: 'none',
        swipeBehavior: 'none',
        itemsReorderable: false,
        itemTemplate: select('#genreMovieTemplate')}">
    </div>
</div>

注意

winControl.itemDataSource

和

data.dataSource

。任何不是标准HTML元素属性的WinJS控件属性都需要将

winControl

属性放在数据绑定的任何属性前面。因此

button

元素的

onclick

属性不需要它，但是

WinJS.UI.Command

具有

图标，该图标不在底层
按钮上，因此需要
winControl
前缀

此外，ListView控件绑定到WinJS.Binding.List的
dataSource
属性，而不是列表本身。但是，由于某些原因，中继器绑定到ListView本身。
只是一个想法，您已经尝试了data win bind=“{winControl.itemDataSource:data}”？感谢您的建议。我在发帖后想到了这一点，并尝试了一下。。。不过运气不好。
<div id="genreMovieTemplate" data-win-control="WinJS.Binding.Template">
    <div class="genreMovieItem">
        <img style="width: 175px; height: 250px;" data-win-bind="alt: title; src: posterUrl" />
    </div>
</div>

var repeaterData = [{genreTitle: "titleA", data: new WinJS.Binding.List() },
{genreTitle: "titleB", data: new WinJS.Binding.List() }
{genreTitle: "titleC", data: new WinJS.Binding.List() }
{genreTitle: "titleD", data: new WinJS.Binding.List() }];

 var titleList = $(".genreRow > .genreTitle");
    var genreLists = $(".genreRow > .genreMovieListView");
    for (var i = 0; i < genreLists.length; i++) {
        var title = titleList[i].innerText;
        var listControl = genreLists[i].winControl;

        tempData.forEach(function (element, i) {
            if (element.genreTitle == title)
                listControl.itemDataSource = element.data.dataSource;
        });
    };

<div id="genreRowTemplate" data-win-control="WinJS.Binding.Template">
<div id="genreRow">
    <h2 class="genreTitle" data-win-bind="innerText: genreTitle"></h2>
    <div class="genreMovieListView"
            data-win-control="WinJS.UI.ListView"
            data-win-bind="winControl.itemDataSource : data.dataSource"
            data-win-options="{ layout: { type: WinJS.UI.GridLayout },
        itemsDraggable: false,
        selectionMode: 'single',
        tapBehavior: 'none',
        swipeBehavior: 'none',
        itemsReorderable: false,
        itemTemplate: select('#genreMovieTemplate')}">
    </div>
</div>