骨干视图，初始化和渲染

我有一个加载子视图的骨干视图。当我加载子视图时，我想在视图获取所需数据时显示加载器，并在视图准备好呈现时隐藏加载器。骨干视图，初始化和渲染

我做了这样的事情：

var appView = Backbone.View.extend({ 
    showLoader: function() { 
     // Code to show loader 
    }, 

    hideLoader: function() { 
     // Code to hide loader 
     }, 

    loadSubView: function() { 
     this.showLoader(); 
     var myView = new MySubView(); 
     this.$el.html(myView.render().el); 
     this.hideLoader(); 
    } 
});

现在，我的子视图加载的集合，可以是这样实现的：

var mySubView = Backbone.View.extend({ 
    initialize: function() { 
     this.myCollection.fetch({ 
      async: false 
     }); 
    }, 

    render: function() { 
     // Code to render 
    } 
});

我的子画面加载集合同步，因为它是我发现只有当我的视图“准备好”呈现时才知道，但我认为这不是使用Backbone的最佳方式。

我该做什么？

来源

2012-06-15 Mickael

没有冒犯，我认为你应该在异步编程上进一步阅读/学习一点。这不是一个主要问题，它是你需要掌握的编程概念。 –

我知道什么是同步或异步的意思。如果我可以再次提出我的问题：通知父母认为获取成功的最佳方式是什么？ – Mickael

有几种方法可以做到这一点。

您可以明确地使用pubsub模式。事情是这样的：

var AppView = Backbone.View.extend({ 
    showLoader: function() { 
     console.log('show the spinner'); 
    }, 

    hideLoader: function() { 
     console.log('hide the spinner'); 
    }, 

    loadSubView: function() { 
     this.showLoader(); 
     var subView = new SubView(); 
     subView.on('render', this.hideLoader); 
     this.$el.html(subView.render().el); 

    } 
}); 

var SubView = Backbone.View.extend({  
    render: function() { 
     console.log('a subView render'); 
     this.trigger('render'); 
     return this; 
    } 
}); 

var appView = new AppView({el: $('body')}); 
appView.loadSubView();

http://jsfiddle.net/theotheo/qnVhy/

您可以将功能的ajaxStart/ajaxStop事件的微调本身：

var AppView = Backbone.View.extend({ 
    initialize: function() { 
     var _this = this; 
     this.$('#spinner') 
      .hide() 
      .ajaxStart(_this.showLoader) 
      .ajaxStop(_this.hideLoader); 
    } 
    ... 
}

或者你可以使用jQuery.ajaxSetup：

var AppView = Backbone.View.extend({ 
     initialize: function() { 
      var _this = this; 
      jQuery.ajaxSetup({ 
       beforeSend: _this.showLoader, 
       complete: _this.hideLoader, 
       success: function() {} 
      }); 
     } 
    ... 
    }

来源

2012-06-15 12:46:22 theotheo

骨干视图，初始化和渲染

回答

相关问题