跟踪itemView中的上传进度

时间:2015-04-06 15:45:49

标签: javascript ajax backbone.js marionette

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

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

ItemView的相关部分

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

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

1 个答案:

答案 0 :(得分:0)

通常,您可能有多个ItemView个视图,每个视图都有自己的模型。要跟踪该视图模型中发生的更改,保留有关该模型的状态信息很常见。为了确保在ItemView方法中可以使用该数据,对此变量具有范围的唯一方法是使其成为视图本身的属性。所以,在你的例子中,你可能会做类似的事情,

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

当模特回来时你会做

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

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

或者,可能更加自我一致, 您可以在模型本身上设置进度属性 。即使模型从一个视图传递到另一个视图,状态信息也遵循模型。而你的氛围就像这样

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

当模特回来时你会做

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