Backbone.js 将主干事件绑定并触发到特定视图

我正在创建一个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>

以及"进步"功能

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

这就是我从drop area视图触发事件的方式

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事件，这将导致所有进度条显示相同的进度

---

<>所以，是否有可能将事件绑定到指定的视图，从而可以单独更新进程，或者事件不是一个好的方法吗？

< P>您可能需要考虑使<代码> DoPoPosivs/Cuff>模型发出进度事件。因此，只需在正在上载的模型实例上触发事件，而不是在

应用程序上触发事件

您的示例代码没有提到哪个类持有
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请求成为视图的责任，还是将其重构到各个模型并不重要。
实际上，我有一个用于放置区域的视图和一个用于每个放置文件的视图，所以我猜模型上的触发器对我来说不起作用。我已经做了一个小提琴，显示了我正在工作的代码@马库斯，更新了我的答案，评论太长了。只有我的0.02美元
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);
}