Question

我开始学习backbone.js并使用示例骨干应用程序，其中根据来自tweeter 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返回，但视图未反映更改。这里会发生什么错误？我怎么能解决这个问题？

请检查小提琴中的demo。

Answer 1

由于1.0版本的Backbone fetch不会自动触发重置事件，而是使用collection.set将获取的模型与您已有的模型合并。要有效地重置您的收藏，您应该更改您的提取调用：

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

官方docs中的更多信息。

Answer 2

Backbone视图有2个属性。

el - 保存容器的选择器。
$ el - jQuery element。

您正在初始化错误。你需要规范

log4j.appender.file.File=${catalina.base}/logs/mylog.log

为什么backbone.js不会在此示例中呈现视图？

2 个答案: