Javascript 如何将Twitter rest api与主干一起使用？

我正试图从这篇文章中构建一个简单的主干应用程序。我想做的是添加一个文本框和一个按钮。每次用户按下按钮，我的应用程序都会向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();

var PageView=Backbone.View.extend({
el:$（“正文”），
活动：{
'单击按钮#添加'：'添加项'
},
初始化：函数（）{
_.bindAll（这是“呈现”、“添加项”）；
this.tweets=新tweets（）；
这个计数器=0；
这个。render（）；
},
render:function（）{
$（this.el）。追加（“”）；
$（this.el）.append（“Search twitts”）；
$（this.el）。追加（“”；
归还这个；
},
附加项：功能（项目）{
var subject=$（“#搜索”）.val（）| |“纽约”；
this.tweets.url=http://search.twitter.com/search.json?q=“+subject+”&回调=？”；
//从未打过电话。。。
this.tweets.bind（'reset'，函数（集合）{
console.log（collection.length）；
警报（收集长度）；
});
$.each（this.tweets.fetch（）.models，function（index，tweet）{
item=新Tweet（）；
item.set({
订单：这个柜台，
信息：tweet.attributes.text//modify item defaults
});
$（'ul'，this.el）.append（
“+item.get（'order'）+”+item.get（'info'）+“
”）；
});
}
});
var pageView=new pageView（）；

问题是：

第一次单击（空文本框）：解析捕获twitter请求 在Tweets集合中。我的ul元素没有附加任何内容

第二次点击（用一些词）：twitter请求是用这个词发出的 单词然而，来自上一次通话的“纽约”推文被打印出来

第三次单击（使用其他单词）：“第二次单击的单词” 这些都是印刷品

我意识到，每次我试图打印我的推文时，我都会收到上一条回复，因为推特还没有回复我。我想我可以在解析回调中得到我的tweet并打印出来，但这看起来很糟糕

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

有什么想法吗

---

提前谢谢

下面是您的示例代码，它是以一种更为独特的主干模式完成的

基本上：

• 你有你的推特收藏
• 将事件处理程序绑定到集合的

  reset

  事件，该事件对新填充的集合执行某些操作
• 在您的视图中，您为按钮设置了事件处理程序-

  单击调用
  collection.fetch（）的事件以从“服务器”获取新数据
  提取完成后，将触发
  reset
  事件，调用绑定到
  reset
  事件的事件处理程序
  

代码：

var Tweet=Backbone.Model.extend（）；
var Tweets=Backbone.Collection.extend({
型号：Tweet，
网址：'http://search.twitter.com/search.json?q=NYC&callback=?',
解析：函数（响应）{
console.log（'正在分析…'）
返回响应结果；
}
});
var PageView=Backbone.View.extend({
el:$（“正文”），
活动：{
'单击按钮#添加'：'doSearch'
},
初始化：函数（）{
_.bindAll（这是“呈现”、“添加项”）；
this.tweets=新tweets（）；
_这个=这个；
//为重置事件绑定事件处理程序。
this.tweets.bind（'reset'，函数（集合）{
//清除所有旧的tweet渲染
_这个.$（'#tweets'）.empty（）；
//对于集合中的每个tweet，我们调用addItem和
//并传递推特。
集合。每个（功能（tweet）{
_这是addItem（tweet）；
});
});
这个计数器=0；
这个。render（）；
},
//此函数是按钮单击的事件处理程序。
//它告诉Tweets集合获取（）
doSearch:function（）{
var subject=$（“#搜索”）.val（）| |“纽约”；
this.tweets.url=http://search.twitter.com/search.json?q=“+subject+”&回调=？”；
this.tweets.fetch（）；
},
render:function（）{
$（this.el）。追加（“”）；
$（this.el）.append（“Search twitts”）；
$（this.el）。追加（“”；
归还这个；
},
附加项：功能（项目）{
控制台日志（项目）；
$（'ul'，this.el）.append（“
”+item.get（'from_user_name'）+”：“+item.get（'text'）+”
”；
}
});
var pageView=new pageView（）；

---

要玩的实例：

这正是我需要的！。谢谢你的帮助。：）@特科内。谢谢你的建议！！。我现在就接受他的回答，但是我还没有足够的声誉来投票支持他：（@IvanFernandez我总是忘记你需要代表投票支持！没关系，我投票支持了他：）@Edward你的代码是我使用主干进行搜索和显示的一个很好的例子。我的问题是，我已经对结果列表有了单独的看法。我想将其重新用于搜索和显示。有什么建议吗？是否建议使用单独的视图在列表中显示结果？谢谢。您好@EdwardMSmith，JSFIDLE中的代码不起作用，有可能更新吗？快速更新。如果您想让它在主干网1.0.0中工作，似乎必须将

{reset:true}

传递到

this.tweets.fetch

。

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();