Question

方案

我正在使用backbonejs，requirejs和jquery创建应用程序。我正在从远程服务器检索数据。获取数据后，我想将其显示给用户。

问题

首先，我在app.js文件中获取数据，然后创建MoviesView的实例并将collection传递到此视图中。在MoviesView内，我有initialize个功能，在此功能中，我正在通过Event triggered收听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');
    }

这里是MoviesView中的initialize and renderAll个函数

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

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

我在控制台中看到的输出

以下是我在控制台中看到的内容

router 
successCallback 
movies view

正如您所见，我在控制台中看不到 renderAll 。

问题

为什么我看不到 renderAll 以及如何解决此问题？

更新

这是我的整个App视图

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的新实例，这意味着我在其他所有事件之前触发事件。

Answer 1

正如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()
});

renderAll函数不会调用

1 个答案: