Question

我向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有关。

Answer 1

要手动让ember知道某个属性已更改，请使用 notifyPropertyChange 。这应该使ember根据你的属性重新计算和绑定或计算propwerties。您可以将其用作this.notifyPropertyChange('imageURL');

Answer 2

看起来oneWay会阻止您设置该值。

如果获得并设置了computed.alias别名，并且允许双向数据流，则compute.oneWay仅提供别名get。该集合不会改变上游属性，而是使当前属性成为值集。这会导致下游属性永久地偏离上游属性。

Docs

尝试更改：

this.set('imageUrl', response.data.attributes['image-url']);

到

this.set('model.imageUrl', response.data.attributes['image-url']);

如何重新呈现此img元素？

2 个答案: