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');
    }

});

可以看出，我正在创建MainRouterbefore call的新实例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 回答