我开始学习backbone.js 并工作一个示例主干应用程序，其中搜索词的推文提要根据推特API 的主干填充。
以下是我的主干 MVC 代码。
BackboneSample.js
$(function() {
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 ...');
console.log('parsing ...');
return response.results;
}
});
var PageView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'doSearch'
},
initialize: function() {
_.bindAll(this);
this.tweets = new Tweets();
_this = this;
this.tweets.on('reset', function(collection) {
_this.$('#tweets').empty();
collection.each(function(tweet) {
_this.addItem(tweet);
});
});
this.counter = 0;
this.render();
},
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' />");
$(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();
});
但这并不像我预期的那样工作。渲染页面后推文未显示。JSON 响应数据从 tweeter API 返回，但视图未反映更改。这里会发生什么错误？我该如何解决这个问题？
请检查小提琴中的演示。