javascript - Backbone View render : fetch-first versus render-first, 两种方法都有故障吗？

Question

这更多的是一个概念/架构问题；构建和实例化 Backbone View 的典型/流行方法似乎是仅在从服务器成功获取必要的模型/集合数据后渲染 View (在 success() 中) > 或 done() 回调)。

这一切都很好，但是如果 View 模板中有某种加载指示器或 UI 元素需要在 fetch 之前/期间显示，该怎么办？如果在调用结束之前不渲染 View ，您实际上无法向用户显示此类通知。

相反，如果您在进行 fetch 之前渲染 View ，您现在可以显示此类 UI 元素，但您现在面临显示大部分为空的模板的风险，因为您的模型/集合数据尚未检索，这看起来相当奇怪。

如果您需要两件事:获取之前/期间的 UI 通知，并且不在获取之前渲染大部分为空的模板，该怎么办？实现这一目标可能有哪些好的方法？

Answer 1

我使用单独的加载 View 来处理加载 gif，该 View 监听从模型/集合获取结果触发的相关事件。负责渲染的 View 这样做并不关心加载 gif。加载 gif 本质上掩盖了当加载 gif 被删除时“显示”的结果:

var MyView = Backbone.View.extend({

    initialize: function () {

        this.listenTo(this.collection, 'reset', this.render);
    },

    render: function () {
        // do whatever you need to here
    }
});

var LoadingView = Backbone.View.extend({

    el: '#loading',

    initialize: function () {

        this.listenTo(this.collection, 'fetchStarted', this.showLoader);
        this.listenTo(this.collection, 'fetchFinished', this.hideLoader);
    },

    showLoader: function () {

        var self = this;

        if (this.waitHandle) {
            clearTimeout(this.waitHandle);
            delete this.waitHandle;
        }
        this.waitHandle = setTimeout(function () {
             self.$el.removeClass('hide');
        }, 300);
     },

     hideLoader: function () {

         clearTimeout(this.waitHandle);
         delete waitHandle;
         this.$el.addClass('hide');
    }
});

var MyCollection = Backbone.Collection.extend({

     getResults: function () {

         var self = this;

         this.fetch({
             beforeSend: function () {
                 self.trigger('fetchStarted');
             },
             complete: function () {
                 self.trigger('fetchFinished');
             }
          });
      }
});

我在加载 View 中使用超时来延迟显示加载 gif，以防不必要。