将骨干事件绑定并触发到特定视图
我创建了一个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事件，这将导致所有进度条显示相同的进度。
那么，是否有可能将事件绑定到指定的视图，以便可以单独更新进度或事件不是一个好方法？
您可能需要考虑让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 ，它应该反映出它的DroppedFile模型的状态。
只需跟踪DropzoneView中的模型，就像现在您使用DropzoneView.files的文件DropzoneView.files 。 无论您是希望将实际的AJAX请求视为视图的责任还是将其重构为单个模型都无关紧要。