绑定并触发骨干事件到一个特定的视图

Question

我创建了一个ajax上传组件，其中包含每个骨干视图的进度条，这是我的视图模板的外观。

<script id="view-template-dropped-file" type="text/html"> 
    <a><%=name %></a><span><%=fileSize%></span> 
    <div class="ui-progress-bar"> 
     <div class="ui-progress"></div> 
    </div> 
</script> 

当我把文件放在我的拖放区域创建一个视图为每个文件这样

for (i = 0; i < files.length; i++) { 
    var view = new DroppedFileView({ 
     model: new DroppedFile({ 
      name: files[i].name, 
      fileSize: files[i].size 
     }) 
    }); 
    var $li = view.render().$el; 
    $('#droparea ul').append($li); 
}); 

一些文件Added显示每个文件的进度条的下降区域。 http://cl.ly/Lf4v

现在当我按上传时，我需要分别显示每个文件的进度。

我试图做的是绑定到一个事件在我DroppedFileView这样

initialize: function() { 
    var app = myapp.app; 
    app.bind('showProgress', this._progress, this); 
} 

和_progress功能

_progress: function(percentComplete) { 
    this.$el.find('.ui-progress').animateProgress((percentComplete * 100), function() { }, 2000); 
} 

，这是我如何触发从下拉区域的事件查看

​​

当然这不会工作，因为我听同样的showPro所有视图中的gress事件将导致所有进度条显示相同的进度。

那么，是否有可能将一个事件绑定到一个指定的视图，这样进度可以单独更新，或者事件不是一个好方法？

Answer 1

您可能想考虑让DroppedFile模型发出进度事件。简单地说，不要触发app上的事件，而是在正在上传的模型实例上触发它。

您的示例代码没有提及哪个类包含xhr方法，但在模型本身上定义它是有意义的。在这种情况下，事件触发很简单：

xhr: function() { 
    var model = this; 
    var xhr = new window.XMLHttpRequest(); 
    xhr.upload.addEventListener("progress", function (e) { 
     if (e.lengthComputable) { 
      var percentComplete = e.loaded/e.total; 
      model.trigger('showProgress', percentComplete); 
     } 
    }, false); 
    return xhr; 
} 

，并考虑构造：

initialize: function() { 
    this.model.bind('showProgress', this._progress, this); 
} 

编辑基于评论：

即使您的视图结构比更复杂一点我在上面假设，在我看来，使用DroppedFile模型作为事件发射器是最好的选择。如果一个DroppedFileView代表DroppedFile，它应该反映它有意义的模型的状态。

只需跟踪DropzoneView中的模型，就像现在使用DropzoneView.files中的文件一样。无论您是希望将实际的AJAX请求视为视图的责任还是将其重构为单个模型都无关紧要。