0

这更像是一个概念/架构问题。构造和实例化主干视图的典型/流行方法似乎是仅在成功fetch从服务器获取必要的模型/集合数据后（在 asuccess()或done()回调中）呈现视图。

这一切都很好，但是如果您在 View 的模板中有某种加载指示器或 UI 元素需要在之前/期间显示fetch呢？通过在调用完成之前不呈现视图，您实际上无法向用户显示此类通知。

相反，如果您在制作 之前渲染视图fetch，您现在可以显示此类 UI 元素，但您现在冒着显示大部分为空模板的风险，因为您的模型/集合数据尚未检索，并且这看起来很奇怪。

如果您需要这两件事怎么办：在 之前/期间的 UI 通知fetch，而不是在 pre- 之前呈现一个大部分为空的模板fetch？实现这一目标可能有哪些好的方法？

4

3 回答 3

4

我使用单独的加载视图来处理加载 gif，该 gif 侦听我从模型/集合获取结果中触发的相关事件。负责渲染的视图在不关心加载 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');
             }
          });
      }
});

我使用加载视图中的超时来延迟显示加载 gif，以防它们不是必需的。

于 2013-05-15T07:19:05.173 回答
2

我通常有一个应用程序级别的视图，当它知道正在获取应用程序的主要集合之一时，它会显示一个加载器。面对我通常在过滤器之前做一个 ajax 总是弹出加载器，并在完成应用程序范围内隐藏。它阻止了整个 UI，但这很好，除非我正在做一个更复杂的仪表板类型的应用程序，其中有明确的模块化问题。

于 2013-05-14T22:42:36.113 回答
1

我写了一篇博客文章，其中包含您可能感兴趣的解决方案（http://davidsulc.com/blog/2013/04/01/using-jquery-promises-to-render-backbone-views-after-fetching-data/） . 基本上，解决问题的一种方法：

  1. 存储 fetch 调用的返回值（这是一个 jQuery 承诺）
  2. 渲染加载视图（使用MyApp.myRegion.show(loadingView);）
  3. 如果您愿意，此时您已经可以实例化您的视图（需要数据）
  4. 当 promise 完成时（即 fetch 完成），在区域内显示你的数据相关视图（如上）
于 2013-05-15T06:49:51.163 回答