javascript - 在WinJS中将列表绑定(bind)到多个目标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>

我试图在翻转框中显示图像库，并在旁边的 ListView 中显示与每个图像相关的文本描述。由于设计原因，我无法将两者放在同一个模板中。

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

有人可以帮我解决这个问题吗？

Answer 1

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

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