Question

I’m creating an ajax upload component which consists of a progress bar for each backbone view, this is how my view template looks like.

<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>

When I drop files on my drop area I create a view for each file like this

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

The drop area with some files added showing a progress bar for each file. http://cl.ly/Lf4v

Now when I press upload I need to show the progress for each file individually.

What I tried to do was to bind to an event in my DroppedFileView like this

initialize: function() {
    var app = myapp.app;
    app.bind('showProgress', this._progress, this);
}

and the _progress function

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

and this is how I trigger the event from the drop area view

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

of course this will not work because I listen to the same showProgress event in all views which will cause all progress bars to show the same progress.

So, is it possible to bind an event to a specified view so the progress can be updated individually or is events not a good approach?

Answer 1

You might want to consider making the DroppedFile model emit the progress events. So simply instead of triggering the event on app, trigger it on the model instance which is being uploaded.

Your sample code doesn’t mention which class holds the xhr method, but it would make sense to define it on the model itself. In which case the event triggering is trivial:

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

And in view constructor:

initialize: function() {
    this.model.bind('showProgress', this._progress, this);
}

Edit based on comments:

Even if your view structure is a bit more complicated than I assumed above, in my opinion using the DroppedFile model as event emitter is the way to go. If one DroppedFileView represents DroppedFile, it should reflect the state of the model it makes sense.

Just keep track of the models in DropzoneView, just like (or instead of how) you do now with the files in the DropzoneView.files. Whether you want to have the actual AJAX request to be the responsibility of the view or refactor it to the individual models doesn’t really matter.