将列表绑定到 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 个描述显示在带有滚动条的控件中，而不是当用户在 flipbox 中更改图像时更改。

谁能帮我解决这个问题？

Answer 1

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

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

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

Bind list to multiple target divs in WinJS

javascript

data-binding

winjs

javascript-databinding

win-universal-app