我一直在尝试将来自 json API 调用的数据绑定到 FlipView,但没有成功。这是HTML代码:
<body>
<!--Define the Template Here-->
<div style="width:100%;height:100%" id="DataTemplate" data-win-control="WinJS.Binding.Template">
<div>
<img src="#" data-win-bind="src : image; alt: name" style="width:100%;height:100%"/>
<div>
<h3 data-win-bind="innerText : title" ></h3>
<h4 data-win-bind="innerText : title" ></h4>
</div>
</div>
</div>
<!--Ends Here-->
<div id="trgFilpView"
data-win-control="WinJS.UI.FlipView"
data-win-options="{itemDataSource:TrainersInformation.trList.dataSource,itemTemplate:DataTemplate}">
</div>
</body>
和 Javascript:
var dataUrl = "https://movie.apisample?api=v1";
var vidArr = [];
WinJS.xhr({ url: dataUrl, responseType: "json" }).then(
function (d) {
var jsonResults = d.responseText;
var objdata = JSON.parse(d.responseText);
objdata.data.videos.forEach(function (item) {
vidArr.push({
title: item.title,
image: item.image.url
});
});
$.each(vidArr, function (index, movie) {
console.log(movie.title + ' | ' + movie.image);
});
},
function (e) {
// handle errors
}
);
//Define the List from the Array
var trainersList = new WinJS.Binding.List(vidArr);
var trainersInfo =
{
trList: trainersList
};
WinJS.Namespace.define("TrainersInformation", trainersInfo);
ajax 调用有效,我可以成功解析 JSON,但是我无法让它与 Flipview 控件绑定。此代码源自 FlipView 示例,该示例在代码中手动设置了 Javascript 对象。我正在尝试修改它以从 API 获取数据。
这是原始代码:
var trainerArray = [
{ name: "Singapore 01", image: "images/SlideShow/1.jpg", description: "2012" },
{ name: "Singapore 02", image: "images/SlideShow/2.jpg", description: "2012" },
{ name: "Singapore 03", image: "images/SlideShow/3.jpg", description: "2012" },
{ name: "Singapore 04", image: "images/SlideShow/4.jpg", description: "2012" },
{ name: "Singapore 05", image: "images/SlideShow/5.jpg", description: "2012" },
{ name: "Singapore 06", image: "images/SlideShow/6.jpg", description: "2012" },
{ name: "Singapore 07", image: "images/SlideShow/7.jpg", description: "2012" },
{ name: "Singapore 08", image: "images/SlideShow/8.jpg", description: "2012" },
{ name: "Singapore 09", image: "images/SlideShow/9.jpg", description: "2012" },
{ name: "Singapore 10", image: "images/SlideShow/10.jpg", description: "2012" },
{ name: "Singapore 11", image: "images/SlideShow/11.jpg", description: "2012" },
{ name: "Singapore 12", image: "images/SlideShow/12.jpg", description: "2012" },
];
//Define the List from the Array
var trainersList = new WinJS.Binding.List(trainerArray); //This is the Private data
//To expose Data publically, define namespace which defines
//The object containing the Property-Value pair.
//The property is the public name of the member and the value is variable which contains data
var trainersInfo =
{
trList: trainersList
};
WinJS.Namespace.define("TrainersInformation", trainersInfo);