从API绑定动态数据到FlipView控件

Bind Dynamic Data from an API to FlipView control

本文关键字：FlipView 控件 数据 动态 API 绑定      更新时间：2023-09-26

我一直试图将数据从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);

try this:

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
    }          
);

您可以通过trainersList.push({})添加数据

相关文章：