如何確保在深度模塊化的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中使用的模式之一。 謝謝你的問。