0

我正在创建一个 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 事件，这将导致所有进度条显示相同的进度。

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

4

1 回答 1

0

您可能需要考虑让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 请求成为视图的责任，还是将其重构为单个模型，都无关紧要。

于 2012-12-17T20:55:22.977 回答