我向API发送了一个远程图像网址。 API执行一些图像处理,然后上载到AWS S3。如果成功,则会将网址返回到response.data.attributes['image-url']
我的控制器有:
imageUrl: Ember.computed.oneWay('model.imageUrl');
actions: {
uploadImage(imageUrl) {
Ember.$.ajax({
url: `api/v1/users/1/update-image`,
type: 'PUT',
data: {
data: {
attributes: {
'image-url': imageUrl
}
}
}
})
.success(response => {
this.set('imageUrl', response.data.attributes['image-url']);
})
.error(response => {
console.log(response);
});
}
}
我的模板有:
<img src={{imageUrl}}>
API始终返回https://project1.imgix.net/products/1/image.jpg
之类的内容。即使image.jpg
是一个全新的形象。
Ember不会重新呈现img
元素。我必须手动刷新才能在浏览器上看到新图像。
有什么方法可以告诉Ember img
元素包含一个新图像并且应该重新渲染它吗?
我应该考虑采用不同的方法吗?
修改
所以我尝试先将imageUrl
设置为null
,然后等待几秒钟来设置实际的图片网址。似乎工作,但这是解决这种情况的正确方法:
.success(response => {
this.set('imageUrl', null);
Ember.run.later((() => {
this.set('imageUrl', response.data.attributes['image-url'] + '?t=' + (new Date()).getTime());
}), 3000);
})
我想知道这是否与在某个特定的Ember运行循环中运行this.set
有关。
答案 0 :(得分:1)
要手动让ember知道某个属性已更改,请使用 notifyPropertyChange 。这应该使ember根据你的属性重新计算和绑定或计算propwerties。您可以将其用作this.notifyPropertyChange('imageURL');
答案 1 :(得分:0)
看起来oneWay
会阻止您设置该值。
如果获得并设置了computed.alias别名,并且允许双向数据流,则compute.oneWay仅提供别名get。该集合不会改变上游属性,而是使当前属性成为值集。这会导致下游属性永久地偏离上游属性。
尝试更改:
this.set('imageUrl', response.data.attributes['image-url']);
到
this.set('model.imageUrl', response.data.attributes['image-url']);