如何使用Backbone.js获取Tweet时间轴？

Question

I'm a beginner for Backbone.js. I've finished some tutorials.

• http://backbonejs.org/docs/todos.html
• http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-getting-started/

I want to create a non-tutorial app by myself and try to create simple app that display tweet timeline using Backbone Collection or Model.

Here is my code. (oauth.js and sha1.js are included in HTML)

$(function(){

var Tweet = Backbone.Model.extend({
});

var Twitter = Backbone.Collection.extend({
    model: Tweet,
    initialize: function(api){
        this.consumerKey = //consumerKey;
        this.consumerSecret = //consumerSecret;
        this.accessToken = //accessToken;
        this.accessTokenSecret = //accessTokenSecret;

        this.message = {
            method: "GET",
            action: api,
            parameters: {
                oauth_version: "1.0",
                oauth_signature_method: "HMAC-SHA1",
                oauth_consumer_key: this.consumerKey,
                oauth_token: this.accessToken
            }
        };
    },

    getTimeline: function(){
        var accessor = {
            consumerSecret: this.consumerSecret,
            tokenSecret: this.accessTokenSecret
        };

        OAuth.setTimestampAndNonce(this.message);
        OAuth.SignatureMethod.sign(this.message, accessor);
        this.url =  OAuth.addToURL(this.message.action, this.message.parameters);
        var options = {
            success: function(data, res){
                console.log(data);
                console.log(res);
            }
        };
        this.fetch(options);
    },

    sync: function(method, model, options){
        options.timeout = 10000;
        options.dataType = 'jsonp';
        return Backbone.sync(method, model, options);
    }

});

var twitter = new Twitter("https://api.twitter.com/1.1/statuses/home_timeline.json");
twitter.getTimeline();
});

When I refreshed HTML page but 401 authorized massage is displayed in the console of Chrome Developer Tool. I could get timeline without Backbone.js.

Please teach me how should I fix it.

Thank you for your kindness.

Answer 1

If you could get it work without Backbone.js, you could use the fetch method without Backbone. Anyways the sync method is only help full if you do REST, like getting, updating, creating and deleting methods.

In your case there is just a fetch right? So override your fetch function and do whatever you done before pluging backbone in. listen to your own success and then do the Collection.reset.

var collection = Backbone.Collection.extend({
   _onLoaded : function(data) {
       this.reset(data, {parse:true});
   },
   fetch : function() {
       $.get("").success(_.bind(this._onLoaded, this));
   }
});