Model view controller 提取主干集合时，显示加载条/微调器的最佳方式是什么？_Model View Controller_Events_Backbone.js

Model view controller 提取主干集合时，显示加载条/微调器的最佳方式是什么？

model-view-controller events backbone.js

Model view controller 提取主干集合时，显示加载条/微调器的最佳方式是什么？,model-view-controller,events,backbone.js,Model View Controller,Events,Backbone.js,你好最近，我进入了主干/需求领域，开始学习一些非常酷的东西。我试图了解在获取主干集合时显示加载条/微调器的最佳实践是什么。以下是我发现用于触发集合上的获取/同步事件的一些策略：方法1:在应用程序启动之前覆盖主干的同步方法，并在该集合上触发“同步”事件方法2:在应用程序启动之前覆盖主干的获取方法，并在该集合上触发“获取”事件方法3:定义集合时，重写fetch（）方法并触发事件“fetching”，以便可以监视任何实例的获取方法4:有些人建议使用事件聚合，以便当视图调用集合的fetch（）

你好

最近，我进入了主干/需求领域，开始学习一些非常酷的东西。我试图了解在获取主干集合时显示加载条/微调器的最佳实践是什么。以下是我发现用于触发集合上的获取/同步事件的一些策略：

方法1:在应用程序启动之前覆盖主干的同步方法，并在该集合上触发“同步”事件

方法2:在应用程序启动之前覆盖主干的获取方法，并在该集合上触发“获取”事件

方法3:定义集合时，重写fetch（）方法并触发事件“fetching”，以便可以监视任何实例的获取

方法4:有些人建议使用事件聚合，以便当视图调用集合的fetch（）时，该视图触发事件

以下是我的情况：

假设我有一个集合C
有两个视图V1和V2可以访问它
V1可以在C上调用fetch，但V2不能
当C启动提取时，只有V2应该显示加载条，并在C上调用reset（）时将其关闭
还可能有其他视图V3、V4等，在获取C时可能还需要在加载栏中显示这些视图

显示加载条、保持严格的MVC模式完好无损的最佳机制是什么

选项1:视图是否应侦听集合上的“同步”事件？问题：如果调用了other fetch（）、save（），则可能会显示加载栏

选项2:视图是否应该侦听集合上的“fetch（）”事件并相应地采取行动

选项3:当一个视图调用集合的fetch（）时，是否应该通知另一个视图

选项4:视图应该调用窗口上的抓取方法还是事件聚合器

其他方法和选择也受到欢迎。你的建议和建议将是最好的资源。谢谢。

在主干网的上下文中。查看，例如：

initialize: function() {
   this.state_loading();

   // assuming this.collection is your collection which is not fetched yet...       
   this.collection.bind('reset', this.state_loaded, this);
   this.collection.fetch();
},

state_loading: function() {
   this.el.addClass('st-loading');
},

state_loaded: function() {
   this.el.removeClass('st-loading');
}

现在，在视图元素上加载class

.st

只需在任何需要的地方显示微调器，例如

.ajax-spinner { backgrund: url('...'); display: none; }
.st-loading .ajax-spinner { display: block; }

现在想想你的选择：

方法1:不要覆盖库。下一个在生产中编写代码的家伙会因此诅咒你

方法2:您最好触发集合上的自定义事件，不需要重写任何本机主干方法。同样，这种类型的黑客攻击只有在你不能想出好的解决方案时才会发生

方法3:我想你的想法是，每次加载某个内容时，你都想显示一个微调器？我会为你的用户感到抱歉

方法4:如果这发生在一个视图中，则不需要使用事件中心。最后，您可以触发集合上的自定义事件，父窗口小部件可以订阅它。另一个需要考虑的问题是，您很可能需要在不同类型的元素中显示微调器，并且需要为不同的视图传递引用或选择器。现在，如果您想要一个通用的解决方案，当然可以在应用程序范围内为您的微调器提供相同的类，但是如果有一天您想要删除它们，您将非常头疼。您最好将这些内容本地化到您的视图中

在主干驱动的大型应用程序中，我们也有类似的情况。为此，我们有一个扩展，它适用于需要显示微调器的视图。看起来有点像这样：

var state_loading: function() {
  if (arguments.length === 0 || arguments[0] === true) {
    this.el.addClass('st-loading');
  } else {
    this.el.removeClass('st-loading');
  }
}

var SomeView = Backbone.View.extend({
  initialize: function(options) {
    this.options = _.extend({}, this.options || {}, options || {});
    this.collection = this.options.collection;
    this.collection.bind('reset', this.render, this);
    this.state_loading(true);
    this.collection.fetch();
  },

  render: function() {
    this.state_loading(false);
    // your code...
  }
});

_.extend(SomeView.prototype, state_loading);

在主干.View的上下文中，例如：

initialize: function() {
   this.state_loading();

   // assuming this.collection is your collection which is not fetched yet...       
   this.collection.bind('reset', this.state_loaded, this);
   this.collection.fetch();
},

state_loading: function() {
   this.el.addClass('st-loading');
},

state_loaded: function() {
   this.el.removeClass('st-loading');
}