如何重新呈现此img元素?

时间:2016-02-07 16:04:28

标签: ember.js ember-cli

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

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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

  

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

Docs

尝试更改:

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

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