试图在WinJS中使用FlipView控件并遇到一些问题。我能够将它绑定到数据源,并在flipview控件内容窗格中显示URL /图片属性,但无法加载图片 - 任何建议:(
我已确保image标记的src属性指向URL / picture属性。我可以通过普通的img标签加载图像。
下面列出的是模板定义和数据源 - 一如既往,感谢任何指针:)datasource:
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
});
flipview绑定:
图库内容就在这里。
<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>
答案 0 :(得分:1)
使用itemTemplate : select('#simple_ItemTemplate')
代替`itemTemplate:simple_ItemTemplate'
最好在代码中设置模板和数据源以避免拼写错误,并且还可以调试代码。
basicFlipView.winControl.itemTemplate = simple_ItemTemplate;
basicFlipView.winControl.itemDataSource = dataList;
答案 1 :(得分:0)
我不同意ankur评论,从我的POV,数据绑定和MVVM是要走的路。 关于你的问题,运行项目并使用DOM资源管理器查看生成的内容,也使用类而不是id作为模板标识符(因为它多次生成)