3 
    <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 アプリで埋め込みオブジェクトを描画する方法に関するガイドが見つかりません。

4

2 に答える 2

1

一部のブラウザでは、embed の src url を更新できません。これを行うには、要素全体を削除し、クローンを作成し、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>

ここでこれが機能することを示すライブデモを作成しました

于 2013-08-11T21:59:24.813 に答える