Ember更新视频源但未被浏览器反映

Question

我有一个嵌套资源的ember应用程序,我正在显示视频.外部资源(视频)只显示所有视频.单击视频时,将video激活嵌套资源并显示标题/播放器.

这在您第一次点击某些内容时效果很好.视频显示并播放.但是,当点击另一个视频时,嵌套的资源视频会更新,DOM <source>会更新,但OLD视频会继续播放!为什么会发生这种情况,我该如何解决？

JSFiddle上的工作示例

Answer 1

我将使用一个组件来创建视频播放器，并将重新渲染逻辑封装在组件中。

该组件看起来像

App.VideoPlayerComponent = Ember.Component.extend({
  src: null,  
  rerenderPlayer: function(){
    if(this.$()) {
      Ember.run.debounce(this, this.rerender, 200);
    }
  },
  srcObserver: function(){
    this.rerenderPlayer();
  }.observes('src')
});

组件模板看起来像

<script type="text/x-handlebars" data-template-name="components/video-player">
  <video controls>
  <source {{bind-attr src=src}} type = "video/mp4"></source>
  </video>
</script>

然后您就可以像这样引用模板中的组件

<script type="text/x-handlebars" data-template-name="video">
  <h2>{{title}}</h2>
  {{video-player src=src}}
</script>

您可以在这里看到一个工作垃圾箱： http: //emberjs.jsbin.com/fehipa/2/edit

作为奖励......如果您创建了一个视频播放器组件，您还可以在组件中包含暂停和播放视频的功能。这样您就可以拥有一个完全可重用的视频播放器，可以在应用程序的任何位置使用。