綁定並觸發骨幹事件到一個特定的視圖

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請求視爲視圖的責任還是將其重構爲單個模型都無關緊要。