Backbone.jsのModelでYouTubeのデータをfetchする

思いついたので、試してみました。

Modelは、以下の様な感じです。

var YoutubeModel = Backbone.Model.extend({
    urlRoot: '',
    defaults: {
        'title': '',
        'url': ''
    },
    url: function() {
        if (this.id) {
            return 'https://gdata.youtube.com/feeds/api/videos/' + this.id + '?v=2&alt=jsonc';
        } else {
            return '';
        }
    },
    parse: function(res) {
        return {
            title: res.data.title,
            url: 'http://www.youtube.com/watch?v=' + res.data.id
        }
    },
    save: function() {
        console.log('save() is not supported.');
    },
    destroy: function() {
        console.log('destroy() is not supported.');
    }
});

fetchしてみます。

var youtubeModel = new YoutubeModel({id: 'MDBLhdSy5t4'});
youtubeModel.fetch({success: function(model, res) {
    console.log('title: ' + model.get('title'));
    console.log('url: ' + model.get('url'));
}});

コンソールにタイトルとURLが表示されたら成功です。もちろん、YouTube以外の外部サービスでも(jsonさえ返してくれれば)使えるはずです。そして、外部サービスと通信している事実をModelの中に局所的に閉じ込められるので、後が楽そうですね。

ViewとCollectionと組み合わせればインクリメンタルサーチとかもスッキリ実装できそうだなー。