0

私は 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 から返されていますが、ビューには変更が反映されていません。ここで発生したエラーは何ですか？どうすればこの問題を解決できますか?

フィドルでデモを確認してください。

4

2 に答える 2

2

Backbone の 1.0 バージョンはfetchリセット イベントを自動的にトリガーしないため、代わりcollection.setに取得したモデルを既に持っている他のモデルとマージするために使用します。コレクションを効果的にリセットするには、フェッチ呼び出しを次のように変更する必要があります。

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

詳細については、公式ドキュメントを参照してください。

于 2013-04-17T07:15:31.167 に答える
0

バックボーン ビューには 2 つのプロパティがあります。

  • el - コンテナーのセレクターを保持します。
  • $el - jQuery 要素。

あなたはそれを間違って初期化しています。あなたは特定する必要があります

el: 'body' or $el: $('body')
于 2015-07-27T06:56:39.040 に答える