javascript - 为什么backbone.js 不渲染本例中的 View ？

Question

我开始学习backbone.js并开发一个示例 Backbone 应用程序，其中搜索词的推文提要是根据tweeter API的 Backbone View 填充的。

以下是我的主干 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 返回，但 View 未反射(reflect)更改。这里会发生什么错误呢？我该如何解决这个问题？

请检查demo在 fiddle 中。

Answer 1

由于 Backbone 1.0 版本 fetch 不会自动触发重置事件，而是使用 collection.set 将获取的模型与您已经存在的其他模型合并有。要有效地重置您的集合，您应该像这样更改您的 fetch 调用:

this.tweets.fetch({reset:true});

更多信息见官方docs .