4

バックボーンのドキュメントでは、 フェッチを使用してページの読み込み時にコレクションにデータを入力するべきではないと述べていることを知っています。その理由は次のとおりです。

var appCollection = Backbone.Collection.extend({
    model:appModel,
    url:'api/app',
    initialize:function(){
        this.fetch();
    },

});

var homeView = Backbone.View.extend({
    el:'#content',
    initialize:function(){
        this.collection = new appCollection(appModel)
        this.render()   

    },
    render: function () {
        var that = this;
        alert(1);
        _.each(this.collection.models, function (item) {
            that.renderApp(item);
         }, this);


    },

    renderApp: function (item) {
        var appview = new appView({
            model: item
        });

        this.$el.append(appview.render().el);
    }
})
 var home = new homeView();

homeview.render 関数は、コレクションがフェッチされる前に実際に呼び出されるため、アラートを削除すると(1); アプリがレンダリングされず、「appname」(テンプレート) が定義されていないというエラーが表示されます。

これを行う方法はありますか？

fetch メソッドは非常に便利で、数秒間待つことを気にしません。実際には、他にもダウンロードするものがたくさんあるので、ページが初期化中であることを示すプログレス バーを表示するつもりでした。コレクションが実際にフェッチされると、コードは引き続き実行されますか???

4

1 に答える 1

13

これを最初から取り上げましょう。

var appCollection = Backbone.Collection.extend({
    model:appModel,
    url:'api/app',
    initialize:function(){
        this.fetch();
    },

});

内部をフェッチすることは避けinitializeます。appCollectionのインスタンスを作成する場合、フェッチは必要ありません。したがって、以下を使用します。

var appCollection = Backbone.Collection.extend({
    model:appModel,
    url:'api/app',    
});

それで、

var homeView = Backbone.View.extend({
    el:'#content',
    initialize:function(){
        this.collection = new appCollection(appModel)
        this.render()   

    },
    render: function () {
        var that = this, p;
        console.log('fetching...');
        p = this.collection.fetch();
        p.done(function () {
            console.log('fetched!');
            _.each(that.collection.models, function (item) {
                that.renderApp(item);
            }, that);
        });
    },

    renderApp: function (item) {
        var appview = new appView({
            model: item
        });

        this.$el.append(appview.render().el);
    }
})
var home = new homeView();

これにより、homeViewをレンダリングでき、コレクションがフェッチされると、モデルがレンダリングされます。何をするのかわからない場合p.doneは、jQueryのDeferredをご覧ください。簡単に言うと、ajaxリクエストはpromiseを返します。約束が果たされると（つまり、コレクションがフェッチされると）、遅延が発生し、で指定した関数.done()が実行されます。console.log進捗状況についてフィードバックするポイントを使用してください。

于 2012-08-07T09:09:52.493 に答える