backbone.js - バックボーン ビュー、初期化、およびレンダリング

Question

サブビューをロードするバックボーン ビューがあります。サブビューをロードするときに、ビューが必要なデータをフェッチするときにローダーを表示し、ビューをレンダリングする準備ができたときにローダーを非表示にしたいと考えています。

私はこのようなことをしました:

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
    }
});

私のサブビューはコレクションを同期的にロードします。これは、ビューがレンダリングの「準備ができている」ことを知る唯一の方法だからですが、これはバックボーンを使用する最良の方法ではないと思います。

どうすればいいですか？

Answer 1

それにはいくつかの方法があります。

1. 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/

2. スピナー自体のajaxStart / ajaxStopイベントに関数をアタッチできます。

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

3. または、次を使用できますjQuery.ajaxSetup。

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