如何在转发器中动态绑定WinJS列表视图

Question

我有一个使用模板的WinJS Repeater。 该模板包含一个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>

我的模板，其中包含一个列表视图：

<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="itemDataSource : data"
                data-win-options="{ layout: { type: WinJS.UI.GridLayout },
            itemsDraggable: false,
            selectionMode: 'single',
            tapBehavior: 'none',
            swipeBehavior: 'none',
            itemsReorderable: false,
            itemTemplate: select('#genreMovieTemplate')}">
        </div>
    </div>
</div>

我的列表视图的模板：

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

数据是动态创建的，每个绑定列表实际上是很多数据，因此我无法获得大量真实数据的样本。

我得到的是一个重复的控件，其重复次数与绑定列表中的记录完全相同。 我没有得到的是显示的绑定列表。 我的内部绑定列表没有通过data-win-bind获得数据绑定。 我已经尝试了几件事，但是却一无所获或出错。 任何帮助表示赞赏。 谢谢。

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

Answer 1

我能够解决我的问题，但是我认为我没有以正确的方式解决问题。 我继续为中继器设置数据源，这使我从上面获得了genreRows。 这一直在工作，只是我无法弄清楚如何访问子数据源。 我的解决方案...加载后在代码中进行设置。 没什么花哨的，只是一个让我感到有些棘手的解决方案。 这是我的代码，以防其他人克服此问题。

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

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

我不会将其标记为可接受的答案，以防万一有人可以指出如何做到这一点。

Answer 2

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

我已经修改了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元素属性的winControl属性，在要绑定数据的任何属性之前都需要winControl属性。 因此， button元素的onclick属性不需要它，但是WinJS.UI.Command具有不在基础button上的icon ，因此需要winControl前缀。

另外，ListView控件绑定到WinJS.Binding.List的dataSource属性，而不绑定到List本身。 由于某种原因，转发器绑定到ListView本身。