通过knockout js获取用户youtube feed?

时间:2012-11-11 16:56:08

标签: json youtube knockout.js youtube-api

这可能吗......这就是我的atm,但是我的数据对象只是返回了一大堆行话,我做错了什么?我做了什么..对,就此而言?

我基本上想要打印出一个用户视频列表(缩略图和标题,并使每个视频本身成为视频本身的可点击链接)

谢谢!

$(document).ready(function(){
    $player.init();

})

var $player = (function(){

    var player = {};

    player.init = function(){


    //init Youtube knockout
        player.initYoutubeKnockout();

    }
    player.knockoutModel = {
        videoData : ko.observableArray([]),

    }
    player.initYoutubeKnockout = function()
    {

        //load the Youtube json feed
        $.ajax({
            url: 'http://gdata.youtube.com/feeds/api/users/USERNAME/uploads?v=2&alt=json',
            type: 'GET',
            dataType: 'jsonp',
            data: {
                count: 5
            },
            success: function(data, textStatus, xhr) {
                player.doYoutubeKnockout(data.item);            
            }
        });   
    }
    player.doYoutubeKnockout = function( data )
    {

        player.knockoutModel.videoData(data);

        ko.applyBindings(player.knockoutModel, $('#youtube-feed')[0]);
        console.log($(this));
    }       


    return player;

})();

1 个答案:

答案 0 :(得分:1)

坦率地说,你根本没有做太多事情。

  • 您从YouTube返回的JSON数据不是来自data.item,它的结构完全不同。

  • 我假设您希望从用户那里获得5次上传。参数名称为max-results,而不是count

  • 可能你做的唯一一件事就是设置网址,但就是这样。

您需要检查JSON返回的样子。检查API参考以了解atom feed的结构。这是XML格式,但相应的JSON响应将具有几乎相同的格式,但有一些细微差别。通过将对象写入控制台来检查对象,以验证您是否获得了正确的属性。

一旦理解了这一点,就需要使用正确的查询来获得您期望的结果。在query parameters上查看他们的API参考。

为了帮助简化您的淘汰代码,我强烈建议您获取您获得的响应并将其映射到具有简化属性名称的对象。例如,要获取条目的缩略图,您必须访问media$group.media$thumbnail数组。如果您只需通过thumbnail访问它就会更容易。

此外,如果您要绑定的元素需要绑定多个值,则有助于以使绑定更容易的方式映射值。例如,在使用attr绑定时,您需要为要添加的每个属性设置属性。相反,您可以将对象中的所有属性分组并绑定到该对象。

我写了一个小提琴,应用我上面提到的所有内容,就像你要求的那样。这应该有助于您了解自己可以做什么以及如何做。

Demo

相关问题