使用Backbone获取Youtube视频

时间:2013-05-25 00:36:07

标签: javascript backbone.js youtube-api

我需要找到一种方法来获取Youtube JSON网址并打印标题和说明。当我尝试获取时,我在这里的代码成功,但是当我尝试在控制台中看到它时,它接收的数组是空的。

你知道为什么会这样吗?

你可以在这里找到代码: http://jsfiddle.net/BHrmC/73/

var Item = Backbone.Model.extend();

var List = Backbone.Collection.extend({
    model: Item,

    url: "https://gdata.youtube.com/feeds/api/playlists/67DEB98D8D9CF0F7?v=2&alt=json-in-script&max-results=6",

    parse: function(response) {
        return response.results;
    },

    sync: function(method, model, options) {
        var that = this;
        var params = _.extend({
            type: 'GET',
            dataType: 'jsonp',
            url: that.url,
            processData: false
        }, options);

        return $.ajax(params);
    }
});

var ListView = Backbone.View.extend({
    el: $('#test'),
    events: {
        'click button#add': 'getPost'
    },
    initialize: function() {
        _.bindAll(this, 'render', 'getPost');
        this.collection = new List();
        this.render();
    },
    render: function() {
        var self = this;
        $(this.el).append("<button id='add'>get</button>");
    },
    getPost: function() {
        var that = this;
        this.collection.fetch({
            success: function(response) {
                console.log(that.collection.toJSON());
                console.log("working");
            },
            error: function() {
                console.log('Failed to fetch!');
            }

        });
    }
});

// **listView instance**: Instantiate main app view.
var listView = new ListView();

1 个答案:

答案 0 :(得分:1)

  1. 决定要使用的数据表示。此处显示的代码使用XML到JSON转换(alt=json-in-script),而您Fiddle中的URL指向更简单的表示形式,即JSON-C订阅源(alt=jsonc)。有关详细信息,请参阅https://developers.google.com/youtube/2.0/developers_guide_jsonc#Comparing_JSON_and_JSONC

  2. 假设您打算使用JSON-C表示,则项目定义位于data.items

    parse: function(response) {
        return response.data.items;
    }
    
  3. 每个对象的视频数据都在 video 属性下。假设您希望Item个实例直接反映视频,则必须使用_.pluck打开它们,例如:

    parse: function(response) {
        var items = response.data.items;
        return _.pluck(items, 'video');
    }
    
  4. 更新的小提琴http://jsfiddle.net/BHrmC/80/