将列表绑定到 WinJS 中的多个目标 div

Question

我在 js 文件中声明了这样的列表（完整列表包含 6 项，但可以多或少）

  var dataArray = [
    {
        type: "item", title: "Cliff",
        picture: "../../images/slike_etnologija/srednji_vek/01.jpg",
        text: "some description"
    },
    {
        type: "item", title: "Grapes",
        picture: "../../images/slike_etnologija/srednji_vek/02.jpg",
        text: "another description"
    },

在 html 文件中声明的两个模板

  <div id="galleryTemplate" data-win-control="WinJS.Binding.Template">
            <div class="overlaidItemTemplate">
                <img class="image img-responsive" src="#" data-win-bind="src: picture; alt: title" />
                <div class="overlay">
                    <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
                </div>
            </div>
        </div>

        <div id="textTemplate" data-win-control="WinJS.Binding.Template">
            <div>
                <p data-win-bind="innerText: text"></p>
            </div>
        </div>

还有两个控件，我需要显示列表中的数据

  <div class="col-md-12" id="basicFlipView"
                     data-win-control="WinJS.UI.FlipView"
                     data-win-options="{ itemDataSource : EtnologijaGallery.itemList.dataSource, itemTemplate: galleryTemplate }">
                </div>

   <p data-win-control="WinJS.UI.ListView"
                     data-win-options="{ itemDataSource : EtnologijaGallery.itemList.dataSource, itemTemplate: textTemplate }">
                </p>

我正在尝试在翻转框中显示图像库，并在其旁边的列表视图中显示与每个图像关联的文本描述。由于设计原因，我不能将这两个东西放在同一个模板中。

我的 Flipbox 工作正常，并显示所有图像，但列表视图不起作用。首先，它仅显示列表中的 3 个描述，并且这 3 个描述显示在带有滚动条的控件中，而不是在用户更改翻转框中的图像时更改。

谁能帮我解决这个问题？

Answer 1

正如http://www.buildwinjs.com/tutorial/2WinJS_Binding/bindingInit/ 中提到的，WinJS 绑定是一次性绑定，您将同一个数组绑定到两个单独的控件。

我认为您应该检查 FlipView 的 onpageselected 事件，当该事件发生时，使用正确的文本更新 div。我想在这种情况下根本不需要使用 ListView。