我一直在尝试将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);
最佳答案
尝试这个：
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);
});
//Define the List from the Array
var trainersList = new WinJS.Binding.List(vidArr);
trgFilpView.winControl.itemDataSource = trainersList.dataSource;
},
function (e) {
// handle errors
}
);
关于javascript - 将动态数据从API绑定(bind)到FlipView控件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16705492/