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中显示图片库，并在其旁边的listview中与每个图片相关联。由于设计我不能把两件事放在同一个模板中。

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

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

Answer 1

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

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

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

1 个答案: