javascript - 在 itemView 中跟踪上传进度

Question

我正在使用 Marionette/Backbone 开发一个应用程序。该应用程序需要通过 AJAX 调用上传文件(使其正常工作)。我想向用户提供反馈，告知他们何时能够选择上传的文件并继续修改它。当我有模型和 ItemView 时，我不知道跟踪进度的最佳实践是什么。我可以将其放在属性中，但据我所知，当同步到服务器时，所有属性都会保存到数据库中。但是 ItemView 需要能够监听模型何时完成，我只是不确定何时何地执行此操作。

我已经解决了一个更基本的解决方案，但它需要在 Marionette/Backbone 框架内工作。

ItemView的相关部分

modelEvents: {
    'change': 'fieldsChanged'
},

fieldsChanged: function() {
    this.render();
},

Answer 1

一般来说，您可能有多个 ItemView View ，每个 View 都有自己的模型。为了跟踪该 View 模型中发生的更改，通常会保留有关该模型的状态信息。为了确保该数据在您的 ItemView 方法中可用，拥有此变量范围的唯一方法是使其成为 View 本身的属性。因此，在您的示例中，您可能会这样做，

onClick: function (event) {
  this.progress = 'pending';
  this.model.save({ filename: this.file Name })
}

当模型回来时，你就会这样做

fieldChanged: function () {
  this.progress = 'loaded';
  this.render();
}

存储模型元数据并使其在 View 上下文中可用的唯一其他方法是通过全局变量，但这样做有双重缺点。从根本上讲，您希望避免污染您的全局分数。更大的问题是如何将全局变量引用到特定的 View 模型。通过允许 View 跟踪所有模型元数据，您可以解决这两个问题，并更加符合最佳实践。

或者，可能更自洽，您可以在模型本身上设置进度属性。即使模型从一个 View 传递到另一个 View ，状态信息也会遵循模型。你的氛围会像这样

onClick: function (event) {
  this.model.progress = 'pending';
  this.model.save({ filename: this.file Name })
}

当模型回来时，你就会这样做

fieldChanged: function () {
  this.model.progress = 'loaded';
  this.render();
}