0

シナリオ

backbonejs、requirejs、jqueryを使ってアプリを作っています。リモートサーバーからデータを取得しています。データが取得されたら、それをユーザーに表示したいと思います。

問題

最初にapp.jsファイル内のデータをフェッチしてから、インスタンスを作成してこのビューにMoviesView渡します。collection内部MoviesViewにはinitialize関数があり、この関数内ではEvent triggeredbyをリッスンしていrouterます。そのイベントがリッスンされたら、renderAll関数を呼び出す必要があります。問題はここにあります。関数はまったく呼び出されません。renderAll

私のコード

これは、サーバーからデータをフェッチする関数です

fetchBoxOfficeMovies: function () {
        var movieCollection = new MoviesCollection;

        movieCollection.fetch({success: this.successCallback, error: this.errorCallback}).then(function () {
            //console.log(movieCollection.toJSON());
            new MoviesView({ collection: movieCollection });
        });
    },

    successCallback: function () {
        console.log('successCallback');
    },

これrouterが私がイベントをトリガーしている場所です

routes: {
        '': 'index'
    },

    index: function () {
        App.Vent.trigger('init');
        console.log('router');
    }

そして、これがinitialize and renderAllMoviesView内の関数です

initialize: function () {
        App.Vent.on('init', this.renderAll, this);
        console.log('movies view');
    },

    renderAll: function () {
        console.log('renderAll');
    },

コンソールに表示される出力

これが私のコンソールに表示されるものです

router 
successCallback 
movies view

ご覧のとおり、コンソールにrenderAllが表示されません。

質問

renderAllが表示されないのはなぜですか? どうすれば修正できますか?

アップデート

これが私のアプリ全体のビューです

var App = Backbone.View.extend({
    el: 'body',

    initialize: function () {
        App.router = new MainRouter();
        Backbone.history.start();

        this.fetchBoxOfficeMovies();
    },

    fetchBoxOfficeMovies: function () {
        var movieCollection = new MoviesCollection;

        movieCollection.fetch({success: this.successCallback, error: this.errorCallback}).then(function () {
            //console.log(movieCollection.toJSON());
            new MoviesView({ collection: movieCollection });
        });
    },

    successCallback: function () {
        console.log('successCallback');
    },

    errorCallback: function () {
        console.log('errorCallback');
    }

});

MainRouterを呼び出す前にの新しいインスタンスを作成していることがfetchBoxOfficeMoviesわかります。これは、他のすべての前にイベントをトリガーしていることを意味します。

4

1 に答える 1

0

DCoder が言ったように、順序が間違っています。console.log の名前を変更して、何が起こっているのかをよりよく理解してください。

router                 -> I trigger a 'init' event
successCallback        -> successCallback
movies view            -> I start listening 'init' events NOW

提案された「修正」:

movieCollection.fetch({
    success: this.successCallback, 
    error: this.errorCallback
}).then(function () {
    //console.log(movieCollection.toJSON());
    var moviesView = new MoviesView({ collection: movieCollection });
    moviesView.renderAll()
});
于 2013-02-23T09:14:49.980 に答える