各バックボーン ビューの進行状況バーで構成される 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);
});
いくつかのファイルが追加されたドロップ領域に、各ファイルの進行状況バーが表示されます。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);
}
これがドロップエリアビューからイベントをトリガーする方法です
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (e) {
if (e.lengthComputable) {
var percentComplete = e.loaded / e.total;
app.trigger('showProgress', percentComplete);
}
}, false);
return xhr;
}
もちろん、すべてのビューで同じ showProgress イベントをリッスンすると、すべての進行状況バーに同じ進行状況が表示されるため、これは機能しません。
では、進行状況を個別に更新できるようにイベントを指定されたビューにバインドすることは可能ですか、それともイベントは良いアプローチではありませんか?