javascript - Ember 更新视频源但未被浏览器反射(reflect)

Question

我有一个带有嵌套资源的 ember 应用程序，我在其中显示视频。外部资源(视频)仅显示所有视频。当您单击视频时，嵌套的 video资源被激活并显示标题/播放器。

这在您第一次单击某些内容时效果很好。视频出现并播放。但是，当单击另一个视频时，嵌套资源视频会更新并且 DOM <source>得到更新，但旧视频继续播放!为什么会发生这种情况，我该如何解决？

Working Example on 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

---

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