如何确保在深度模块化的Backbone、Require.js和D3应用程序中,一个函数将在另一个函数之前被调用?

ui7jx7zq  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(86)

我正在开发一个模块化的javascript应用程序,除了一个细节之外,一切看起来都很整洁:我只是想知道如何加载我的initialize函数,只有当我的模型已经从服务器上用这个Backbone.collection.fetch()方法获取。
请看一下this文件,如果你愿意的话,可能还有whole project,我非常感谢你的合作。

vngu2lb8

vngu2lb81#

正如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
    }      

});
bf1o4zei

bf1o4zei2#

如果我没听错的话,我想你需要在fetch中使用一个“Success”回调函数。
如果您担心的是模块化代码中的解耦函数计时,正如您的问题标题所暗示的,我建议使用Backbone的Events。请参阅事件聚合器,或发布-订阅设计模式。

hi3rlvi2

hi3rlvi23#

使用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中使用的模式之一。感谢Q。

相关问题