Question

    <object width="640" height="390"> 
    <param name="movie" {{bindAttr src="value"}} ></param>
    <param name="allowScriptAccess" value="always"></param>
    <param name="playerapiid" value="main"></param>
    <embed {{bindAttr src="src"}} type="application/x-shockwave-flash" 
    allowscriptaccess="always"
    width="640" height="390"></embed>
    </object>

因此我绑定了嵌入文件所在的属性，但当HTML更新为n值时，嵌入对象（在本例中为youtube视频）不会更改。我找不到任何关于如何在ember应用程序中绘制嵌入对象的指南。

Answer 1

在某些浏览器中，您无法更新嵌入的src网址。为此，您需要删除整个元素，克隆，更改src URL，然后再次追加。

在嵌入中设置它很简单，只需使用view.rerender，dom将替换为新副本。

唯一的技巧是：创建一个包装嵌入视图的视图。从包装器视图中，我们调用rerender。因此，我们不会在下次调用中丢失srcChanged观察者。

视图实现

App.VideoView = Ember.View.extend({
    templateName: 'video',
    embedView: Ember.View.extend({
        src: null,
        templateName: 'embed',
        srcBinding: 'parentView.src',
        viewName: 'embed'        
    }),
    src: null,
    srcChanged: function() {        
        this.get('embed').rerender();
    }.observes('src')
});

模板

<script type="text/x-handlebars" data-template-name="video">    
    {{view view.embedView}}
</script>

<script type="text/x-handlebars" data-template-name="embed">    
  <object width="640" height="390"> 
    <param name="movie" {{bindAttr src="view.src"}} ></param>
    <param name="allowScriptAccess" value="always"></param>
    <param name="playerapiid" value="main"></param>
    <embed {{bindAttr src="view.src"}} type="application/x-shockwave-flash" allowscriptaccess="always" width="640" height="390"></embed>
  </object>
</script>

用法：

<script type="text/x-handlebars" data-template-name="your-template">
    ...
    {{view App.VideoView srcBinding="currentSource"}}
    ...
</script>

我创建了一个实时演示，展示了这个有效here

Answer 2

更新嵌入对象上的src不会导致嵌入对象重新加载。它仅在初始化嵌入对象时使用。你需要替换整个东西，我建议创建一个组件/视图并交换视图而不是src值。

如何在Ember中更新flash嵌入对象？

2 个答案: