javascript - 在itemView中跟踪上传进度

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

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

ItemView的相关部分

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

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

最佳答案

通常，您可能有多个ItemView视图，每个视图都有其自己的模型。为了跟踪该视图的模型中发生的更改，通常保留有关该模型的状态信息。为确保该数据在您的ItemView方法内可用，对该变量进行作用域的唯一方法是使其成为视图本身的属性。因此，在您的示例中，您可能会做类似的事情，

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

当模型回来时，你会做

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

存储模型元数据并使之在视图的上下文中可用的唯一其他方法是通过全局变量，但这有两个缺点。从根本上讲，您希望避免污染您的整体得分。更麻烦的是如何将全局变量引用到特定的视图模型。您可以通过允许视图跟踪所有模型元数据来解决这两个问题，并与最佳实践保持更好的一致性。

另外，也可以更加自洽，您可以在模型本身上设置progress属性。即使模型从一个视图传递到另一个视图，状态信息也会跟随模型。和你的氛围想要这样

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

当模型回来时，你会做

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

关于javascript - 在itemView中跟踪上传进度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29474563/