Question

我使用BackboneJS处理大型企业应用程序。应用程序中的一个页面是通过REsT使用多个子系统调用构建的。如何确保加载页面所需的所有服务都已调用且模板已绑定完成？

例如，我有一个MasterView，负责处理每个子视图的collection.fetch()，就像这样。

myApp.views.MasterView = Backbone.View.extend({
    initialize: function(params) {
        var self = this;
        this.collection.fetch({
            success: function(resp) {
                self.collection.bind("reset", self.render(), self);
            },
            error: function(xhr, xhrStatus) {
                // push error message, in case of fetch fails.
            }
        });
    },
    render: function() {
        var self = this;
        this.collection.each(function(model) {
            if (model.get('authorize') && model.get('status') === "success" && model.get('data').length > 0) {
                self.bindTemplate(model.get('data')[0]);
            }
        });
    }
});

我有一个页面视图集，负责渲染另外两个视图CustomerInfo和CustomerAccounts。观点是这样的。

myApp.views.CustomerView = Backbone.View.extend({
        initialize: function() {
            var customerInfo = new myApp.collection.CustomerInfo();
            new myApp.views.CustomerInfo({el: $("#infoContainer"), collection: customerInfo});

            var customerAccount = new myApp.collection.CustomerAccount();
            new myApp.views.CustomerAccount({el: $("#accountContainer"), collection: customerAccount});
        }
});

而CustomerInfo和CustomerAccount视图，如下所示，

myApp.views.CustomerInfo = myApp.views.MasterView.extend({
    initialize: function() {
        var self = this;
        myApp.views.MasterView.prototype.initialize.call(self, {
            qParam1: "qparam1",
            qParam2: "qparam2"
        });
    },
    render: function() {
        var self = this;
        self.template = _.template(myApp.Templates.get("customer-page/customer-info"));
        myApp.views.MasterView.prototype.render.apply(self);
    },
    bindTemplate: function(data) {
        var self = this;
        $(self.el).html(self.template({"info": data}));
    }
});
 
myApp.views.CustomerAccounts = myApp.views.MasterView.extend({
    initialize: function() {
        var self = this;
        myApp.views.MasterView.prototype.initialize.call(self, {
            qParam1: "qparam1"
        });
    },
    render: function() {
        var self = this;
        self.template = _.template(myApp.Templates.get("customer-page/customer-accounts"));
        myApp.views.MasterView.prototype.render.apply(self);
    },
    bindTemplate: function(data) {
        var self = this;
        $(self.el).html(self.template({"accounts": data}));
    }
});

我想知道是否有任何方法可以从myApp.views.CustomerView知道观看CustomerInfo和CustomerAccounts已完成其渲染？我在这里遇到的主要问题是CustomerInfo视图加载速度很快，但CustomerAccount视图需要一些时间来加载。因此，当两个视图都准备好在DOM上时，我需要一次显示页面。

Answer 1

实例化视图时，请向view_ready事件添加侦听器。当视图完成获取数据并进行渲染时，它会自动触发它在父视图的render方法的末尾

self.trigger('view_ready');

在 Main 视图中添加如下内容：

this.listenTo(CustomerInfoView, 'view_ready', this.customer_info_ready);
this.listenTo(CustomerAccountsView, 'view_ready', this.customer_account_ready);

然后在主视图或主模型中添加2个属性：info_ready和customer_ready并将它们初始化为0 每次前面提到的2个事件中的一个被触发时，执行以下操作：

customer_info_ready : function(){
    this.model.set('info_ready',true);
    if (this.model.get('account_ready') === true) {
         this.trigger('both_elements_ready'); 
     }
}
customer_account_ready : function(){
    this.model.set('account_ready',true);
    if (this.model.get('info_ready') === true) {
         this.trigger('both_elements_ready'); 
     }
}

然后在主视图上为'both_elements_ready'添加一个监听器：

initialize: function() { 
 //your code
 this.on('both_elements_ready',this.page_ready); }

编辑：添加了信息，使答案与问题更相关，更详细。

Answer 2

编辑：这个答案的灵感来源于我从样本“ Brunch with Chaplin ”示例here中学到的内容。 Chaplin是建立在主干之上的框架。

好的，所以我要建议一个基于咖啡因的解决方案（我碰巧在咖啡中有一个解决方案：/！如果你想转换回js，请尝试使用js2coffee）

大师班

我们的想法是拥有一个主类 - 而不是视图 - 将app放在手中，而不是主视图。

module.exports = class Application
  initialize: (finished_init) =>
    @collection = new Collection()
    @main_view = new View()
    @collection.fetch(
      success: (collection) =>
        @main_view.collection = @collection
        finished_init()
    )
  render: (targetLocation, params) ->
    switch targetLocation
      when "main" then (
        @main_view.render()
      )

在initialize方法中，我们获取集合数据。成功时，会调用finshed_init()。您可以将其替换为@render（顺便说一句，@ ==此:)）

初始化

以下是我初始化应用的方式：

$ ->
  app = new Application()

  app.initialize( ->
    #----------------------------------#
    # Create the router and its routes
    # This is called at the finished_init() of the Application class
    #----------------------------------#
    app_router = new Router
  )

以异步方式运行多个`fetche`

你可以有一个监控fetche完成的功能，或你可以尝试使用async。它有一个很好的`parallel函数就可以做到这一点。

@collection1 = new Collection()
@collection = new Collection()
@main_view1 = new View()
@main_view2 = new View()

async.parallel [ (callback) ->
  setTimeout (->
    @collection1.fetch(
      success: (collection) =>
        @main_view1.collection = @collection
        callback null, "one"
  ), 200
, (callback) ->
  setTimeout (->
    @collection2.fetch(
      success: (collection) =>
        @main_view2.collection = @collection
        callback null, "two"
  ), 100
 ], (err, results) ->
   if not err
    @render()  # Render what you want

Answer 3

经过一段时间的打破我的头脑，并在Google上搜索，我找到了this link。

所以我对我的MasterView做了一些改动，它正在工作并解决了我的问题。我在MasterView中所做的更改是

var activeConnections=0;

myApp.views.MasterView = Backbone.View.extend({
    initialize: function(params) {

        activeConnections++;

        var self = this;
        this.collection.fetch({
            success: function(resp) {

                activeConnections--;

                self.collection.bind("reset", self.render(), self);

                if(activeConnections===0){
                    // trigger the page has finished rendering
                }
            },
            error: function(xhr, xhrStatus) {
                // push error message, in case of fetch fails.
                if(activeConnections===0){
                    // trigger the page has finished rendering
                }
            }
        });
    },
    render: function() {
        var self = this;
        this.collection.each(function(model) {
            if (model.get('authorize') && model.get('status') === "success" && model.get('data').length > 0) {
                self.bindTemplate(model.get('data')[0]);
            }
        });
    }
});

感谢所有帮助我解决此问题的人。

如何确保Backbone完全呈现页面？

3 个答案:

大师班

初始化

以异步方式运行多个`fetche`

如何确保Backbone完全呈现页面？

3 个答案:

大师班

初始化

以异步方式运行多个fetche

以异步方式运行多个`fetche`