1

我一直在尝试将来自 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);
4

2 回答 2

0

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

于 2014-07-18T01:58:14.887 回答
0

尝试这个：

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
    }          
);
于 2013-05-23T10:59:52.373 回答