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);
});

添加了一些文件的放置区域显示每个文件的进度条。 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事件，这会导致所有进度条显示相同的进度。

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

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请求成为视图的责任还是将其重构为单个模型并不重要。

将骨干事件绑定并触发到特定视图

1 个答案: