lundi 22 octobre 2018

Ember.js: Reloading img tag without src change

I have an img tag as follows:

<img class="avatar" src=""/>

src is bound to a computed property like this:

src: computed('user.avatarUrl', function() {
    var avatarUrl = this.get('user.avatarUrl');
    if (avatarUrl) {
        return avatarUrl;
    } else {
        return null;
    }
})

The user is allowed to upload a replacement avatar. This is done through an ajax request like this:

uploadImage(file) {
    this.set('src', undefined);
    var self = this;
    $.ajax({
        type: 'POST',
        url: user.getAvatarUploadUrl(),
        data: file,
        contentType: 'application/octet-stream',
        processData: false,
        success() {
            // Do something to tell the view to refresh/the image to be re-downloaded
        },
        error() {

        }
    });
}

The catch is that the avatar URL is deterministic based on the account of the user: http://host/users/{user_id}/photo. Therefore after the update, there's nothing to change in the Ember handlebars template and the photo will not change. Even on changing views and back, it does not seem that Ember wants to fully refresh the view.

I think my issue is the same as the dead thread: How do I rerender this img element?

I have tried using notifyPropertyChange in a few different ways, but I don't think the Observer framework will re-render unless the values actually are changed. I don't want something that involves scheduling a delay so a run loop completes with src=null and then a subsequent one completes with src={url} (unless there's seriously no other way to do this).




Aucun commentaire:

Enregistrer un commentaire