如何将 Twitter rest api 与 Backbone 一起使用？

Question

我正在尝试从这篇帖子 Unable to fetch data from Twitter RESTful API using Backbone.js Collection 构建一个简单的 Backbone 应用程序。我想做的是添加一个文本框和一个按钮。每次用户按下按钮时，我的应用都会向 twitter 发出请求，并根据文本框内容在 twitter 中搜索（默认搜索单词“NYC”）。

我的代码如下。

我的推文集

var Tweets = Backbone.Collection.extend({
    model: Tweet,
    url: 'http://search.twitter.com/search.json?q=NYC&callback=?',
    parse: function(response) {
        console.log('parsing ...')
        return response.results;
    }
});

我的看法。

var PageView = Backbone.View.extend({
    el: $('body'),
    events: {
    'click button#add': 'addItem'
    },
    initialize: function() {
        _.bindAll(this, 'render', 'addItem');
        this.tweets = new Tweets();
        this.counter = 0;
        this.render();
    },
    render: function() {
        $(this.el).append("<input id= 'search'type='text' placeholder='Write a word'></input>");
        $(this.el).append("<button id='add'>Search twitts</button>");
        $(this.el).append("<ul id='tweets'></ul>");
        return this;
    },
    addItem: function(item) {
        var subject = $('#search').val() || 'NYC';
        this.tweets.url = 'http://search.twitter.com/search.json?q=' + subject + '&callback=?';

        // never called ...
        this.tweets.bind('reset', function(collection) {
            console.log(collection.length);
            alert(collection.length);
        });


        $.each(this.tweets.fetch().models, function(index, tweet) { 
            item = new Tweet();
            item.set({
                order: this.counter,
                info: tweet.attributes.text// modify item defaults
            });
            $('ul', this.el).append("<li>" + item.get('order') + " " + item.get('info') + "</li>");
        });

    }
});
var pageView = new PageView();

事情是这样的：

1. 第一次点击（空文本框）：推特请求被解析捕获 在推文集合中。我的 ul 元素没有附加任何内容。

2. 第二次点击（用一些词）：用那个词发出推特请求 单词。但是，会打印上一次通话中的“NYC”推文。

3. 第三次点击（使用其他单词）：第二次点击的“某个单词” 被打印出来了。

....

我意识到，每次我尝试打印我的推文时，我都会收到之前的回复，因为 Twitter 还没有回复我。我想我可以在解析回调中获取我的推文并打印出来，但这似乎很讨厌。

另一方面，我试图让我的推文将它们绑定到重置事件，但它也不起作用。

有什么想法吗？？

提前致谢！！

Answer 1

这是您以更惯用的 Backbone 模式完成的示例代码。

基本上：

• 你有你的推文收藏
• 您将事件处理程序绑定到集合的 reset 事件，该事件对新填充的集合执行某些操作
• 在您看来，您为按钮-click 事件设置了一个事件处理程序，该事件调用collection.fetch() 从“服务器”获取新数据。
• 抓取完成后，触发reset事件，调用绑定到reset事件的事件处理函数。

代码：

var Tweet = Backbone.Model.extend();

var Tweets = Backbone.Collection.extend({
    model: Tweet,
    url: 'http://search.twitter.com/search.json?q=NYC&callback=?',
    parse: function(response) {
        console.log('parsing ...')
        return response.results;
    }
});
var PageView = Backbone.View.extend({
    el: $('body'),
    events: {
        'click button#add': 'doSearch'
    },
    initialize: function() {
        _.bindAll(this, 'render', 'addItem');
        this.tweets = new Tweets();
        _this = this;
        // Bind an event handler for the reset event.
        this.tweets.bind('reset', function(collection) {
            // Clear any old tweet renderings
            _this.$('#tweets').empty();
            // For each tweet in the collection, we call addItem and
            // and pass the tweet.
            collection.each(function(tweet) {
                _this.addItem(tweet);
            });
        });
        this.counter = 0;
        this.render();
    },
    // This function is the event handler for the button click.
    // It tells the Tweets collection to fetch()
    doSearch: function() {
        var subject = $('#search').val() || 'NYC';
        this.tweets.url = 'http://search.twitter.com/search.json?q=' + subject + '&callback=?';
        this.tweets.fetch();
    },
    render: function() {
        $(this.el).append("<input id= 'search'type='text' placeholder='Write a word'></input>");
        $(this.el).append("<button id='add'>Search twitts</button>");
        $(this.el).append("<ul id='tweets'></ul>");
        return this;
    },
    addItem: function(item) {
        console.log(item);
        $('ul', this.el).append("<li><b>" + item.get('from_user_name') + "</b>:  " + item.get('text') + "</li>");

    }
});
var pageView = new PageView();

可玩的实时示例：http://jsfiddle.net/38L35/16/