WinJS翻转视图控件和项目模板答案

【问题标题】：WinJS flipview control and item templateWinJS翻转视图控件和项目模板
【发布时间】：2013-04-07 15:17:59
【问题描述】：

尝试在 WinJS 中使用 FlipView 控件并遇到一些问题。我能够将它绑定到数据源并在翻转视图控件内容窗格中显示 URL/图片属性，但它无法加载图片 - 任何建议:(

我已确保图像标签的 src 属性指向 URL/图片属性。我可以通过普通的 img 标签加载图像。

下面列出的是模板定义和数据源 - 一如既往，感谢任何指针:)

数据源：

var dataArray = [
 { type: "item", title: "Hole 1", picture: "/images/IMG_0550.jpg" },
 { type: "item", title: "Hole 2", picture: "/images/IMG_0564.jpg" },
 { type: "item", title: "Hole 3", picture: "/images/IMG_0572.jpg" },
 { type: "item", title: "Hole 4", picture: "/images/IMG_0594.jpg" },
 { type: "item", title: "Hole 5", picture: "/images/IMG_0605.jpg" }
 ];

var dataList = new WinJS.Binding.List(dataArray);
// Create a namespace to make the data publicly
// accessible. 
WinJS.Namespace.define("ImageData", {
    bindingList: dataList,
    array: dataArray
});

翻转视图绑定：

图库内容放在这里。

      <div id="simple_ItemTemplate" data-win-control="WinJS.Binding.Template">
        <div>
            <img src="#" data-win-bind="src: picture; alt: title" />
            <div>
                <h2 data-win-bind="innerText: title"></h2>
            </div>
        </div>
     </div>    

    <div id="basicFlipView" 
         data-win-control="WinJS.UI.FlipView"
         data-win-options="{ itemDataSource : ImageData.bindingList.dataSource, itemTemplate : simple_ItemTemplate }">
    </div>
  </section>

【问题讨论】：

标签： windows-8 winjs itemtemplate flipview

【解决方案1】：

使用 itemTemplate : select('#simple_ItemTemplate') 代替 `itemTemplate : simple_ItemTemplate'

最好在代码中设置模板和数据源，避免拼写错误，代码也可以调试。

basicFlipView.winControl.itemTemplate = simple_ItemTemplate;
basicFlipView.winControl.itemDataSource = dataList;

【讨论】：

这确实有效...谢谢您的提示。现在明白为什么:-)

【解决方案2】：

我不同意 ankur 的评论，从我的 POV 来看，数据绑定和 MVVM 是要走的路。关于您的问题，运行项目并使用 DOM 资源管理器查看生成的内容，还使用类而不是 id 作为模板标识符（因为它会生成多次）

【讨论】：