javascript - 如何将 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();

事情是：

第一次点击（空文本框）：twitter 请求被 Tweets 集合中的 parse 捕获。我的 ul 元素没有附加任何内容。
第二次点击（有一些词）：用那个词发出推特请求。但是，会打印上一次通话中的“NYC”推文。
第三次单击（带有其他单词）：打印第二次单击的“某些单词”。

……

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

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

有任何想法吗？？。

提前致谢！！

score 16 · Accepted Answer

这是您以更惯用的 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/

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

1 回答 1

Related

Reference