如何确保在深度模块化的Backbone，Require.js和D3应用程序中先调用某个函数？

Question

这是我的头痛。 我正在开发一个模块化的javascript应用程序，除了一个细节外，其他所有内容看起来都非常整洁：仅在使用Backbone.collection.fetch()方法从服务器中获取了模型后，我才能弄清楚如何加载initialize函数。

如果您愿意的话，请查看此文件，甚至可能查看整个项目 ，非常感谢您的合作。

Answer 1

正如Reed Spool指出的那样， fetch具有成功的回调。 使用方法如下：

var View = Backbone.View.extend({

    initialize: function () {
      // Preserve *this* in closures
      var that = this;

      this.collection.fetch({
        success: function(data){
          console.log(data);            
          that.render();
      },
        error: function(){
          console.log('error');
        }
      });

    },

    render: function() {
      //render whatever you need from your fetched collection
    }      

});

Answer 2

如果我没听错，我认为您需要在提取中使用“成功”回调函数。 参见此处＃2 http://chilipepperdesign.com/2013/01/15/backbone-js-bind-callback-to-successful-model-fetch/

如果您担心的是模块化代码中的函数计时解耦，正如您的问题的标题所建议的那样，我建议您使用Backbone的事件。 请参阅事件聚合器或Pub-Sub设计模式。

Answer 3

使用Backbone解决此问题的常规方法是使用事件。 我是基于MarionetteJS创始人Derek Bailey的各种博客文章撰写的，因此以后找到相关参考文献时，我将添加参考文献...

您的视图将执行以下操作：

var view = Backbone.View.extend({
    ...
    _actuallyInitialize: function () {
        ...
    }
    initialize: function (attr, options) {
        ...
        this.listenTo(this.model, 'data:fetched', this._actuallyInitialize);
        ...
    }
});

而获取模型的代码将执行以下操作：

var jqXHR = model.fetch();
jqXHR.done((function (bindModel) {
    return function (response, textStatus, jqXHR) {
        ...
        bindModel.trigger('data:fetched');
    };
}(model)));

这样，您可以维护高级模块化方法，解耦代码（任何数量的视图都可以在立即fetch进行更新），并保持可读性。 您的Model自行完成， View则自行完成。 在我看来，这非常整洁，是我喜欢在Backbone中使用的模式之一。 谢谢你的问。