我有一个img标签,如下所示:
<img class="avatar" src="{{src}}"/>
src绑定到这样的计算属性:
src: computed('user.avatarUrl', function() {
var avatarUrl = this.get('user.avatarUrl');
if (avatarUrl) {
return avatarUrl;
} else {
return null;
}
})
允许用户上传替换头像。这是通过这样的ajax请求完成的:
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() {
}
});
}
要注意的是,头像URL是基于用户帐户http://host/users/ {user_id} / photo确定的。因此,更新后,Ember车把模板没有任何更改,照片也不会更改。即使在更改视图和返回视图时,Ember似乎也不希望完全刷新视图。
我认为我的问题与死线程相同:How do I rerender this img element?
我尝试以几种不同的方式使用notifyPropertyChange,但是除非实际 的值发生改变,否则我认为Observer框架不会重新呈现。我不希望发生涉及安排延迟的事情,因此运行循环以src = null完成,然后随后的循环以src = {url}完成(除非真的没有其他方法可以做到这一点)。