Windows 8 WinJS flipview控件和项目模板

Windows 8 WinJS flipview控件和项目模板,windows-8,winjs,itemtemplate,flipview,Windows 8,Winjs,Itemtemplate,Flipview,尝试在WinJS中使用FlipView控件时遇到一些问题。我可以将其绑定到数据源,并在flipview控件内容窗格中显示URL/picture属性,但无法加载图片-有任何建议: 我已经确保图像标记的src属性指向URL/picture属性。我能够通过一个普通的img标签加载图像 下面列出了模板定义和数据源-一如既往,请注意任何提示: 数据源: var dataArray = [ { type: "item", title: "Hole 1", picture: "/images/IMG_055

尝试在WinJS中使用FlipView控件时遇到一些问题。我可以将其绑定到数据源,并在flipview控件内容窗格中显示URL/picture属性,但无法加载图片-有任何建议:

我已经确保图像标记的src属性指向URL/picture属性。我能够通过一个普通的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
});
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>
使用itemTemplate:选择“simple\u itemTemplate”而不是“itemTemplate:simple\u itemTemplate”

最好在代码中设置模板和数据源,以避免输入错误,代码也可以调试

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

我不同意ankur的评论,从我的观点来看,数据绑定和MVVM是一条路要走。
关于您的问题,运行该项目并使用DOM explorer查看生成的内容,同时使用类而不是id作为模板标识符,因为它被多次生成

这确实有效…感谢您的提示。现在要了解原因:-