4

私の目標は、条件付きで Ember ビューに表示できる Facebook のようなボタンを作成することです。私のテンプレートは次のとおりです。

{{#if condition}}
    Click Like: <div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://www.facebook.com/obnob" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>
{{else}}
    Nothing to like here!
{{/if}}

ページの存続期間中に変更があった場合condition、いいねボタンの HTML コードはそれに応じて挿入および削除されます。問題は、ページが読み込まれた後にいいねボタンの div が挿入された場合、Facebook JavaScript ライブラリがそれを解析せず、いいねボタンに変換しないことです。これを行うには、 を呼び出す必要がありますFB.XFBML.parse()。

didInsertElement()のフックを使用してみましたEmber.Viewが、これは、ビューが DOM に挿入された後ではなく、最初に DOM に挿入されたときにのみ実行されます。

テンプレートに script タグを追加して、これを修正しようとしました。

<script>FB.XFBML.parse();</script>

スクリプト タグが Metamorph のスクリプト タグに干渉するため、これは失敗しました。

質問

  1. Ember には、既にレンダリングされた Ember ビューを Metamorph が変更するたびにコードを実行するためのフックがありますか?
  2. Metamorph のタグを破壊することなく、Ember テンプレートにスクリプト タグを記述するにはどうすればよいですか?
4

2 に答える 2

2

ボタンのビューを定義し、didInsertElement関数で任意のカスタムロジックを実行できます。例：

{{#if condition}}
    {{view App.LikeButton}}

..。

App.LikeButton = Em.View.extend({
    templateName: 'like-button',
    didInsertElement: function() {
        //apply you custom logic here
    }
})

didInsertElement関数は、ビューがレンダリングされてDOMに追加された後に毎回呼び出されます。

于 2012-08-25T20:08:12.470 に答える
2

ビュー内の変数を観察できます。だからあなたはするだろう

App.View = Ember.View.extend({
    conditional: null,

    _conditionalChanged: function() {
        console.log('conditional changed');
    }.observes('conditional')
})

これにより、条件が変更されたときにコードを起動できます。

そうは言っても、元の問題に基づいて、状態を管理するために条件を使用する必要はないと思います。ビュー内でStateManagerを使用することを検討する必要があります。このように、Facebook ボタンの状態が変化すると、さまざまなアクション/イベントが発生する可能性があります。実際、Facebook ボタンの設定を担当する完全に別のビューが必要です。

于 2012-08-25T14:36:21.117 に答える