Emberjs + Handlebars +オブジェクトの変更とイベント

Question

jQueryのオブザーバは、ハンドルバーのロジックに表示されていない要素にバインドされていないことがわかりました。

私は次のことを考えてみましょう。私は（その人が空で納得させるために必要なのは何か）、コンソール、人= nullを実行している場合

{{#if person}} 
    Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>! 
{{else}} 
    Please <a class="login">log in</a>. 
{{/if}} 

<script> 
$('.login').click(function() { 
    alert("Hi there."); 
}); 
</script> 

- ログインオブザーバは動作しません。私はすでにいくつかの他のものをロードするために、embers didInsertElement（）を使用していますが、イベントオブザーバを再バインドできるように、 "onChange"イベントがあります。

Answer 1

大きな質問はなぜあなたが欲しいですか？ Emberは、jQueryを使わずにクリックハンドラのサポートを組み込んでいます。あなたの<script>が機能していない理由は、emberがビューをDOMに挿入する遅延方法になる可能性が高いからです。 Ember.View.append()を実行すると、その要素は後でDOMに挿入されます。

これは、jQueryのクリックハンドラーをdidInsertElement()につけてほしいと思っていることです。

http://jsfiddle.net/algesten/5LPPz/2/

click: function() { 
    alert("Hi there."); 
} 

N.B.：燃えさしの方法は、ちょうどclick暗黙のハンドラ関数を使用することですしかし

http://jsfiddle.net/algesten/5LPPz/1/

didInsertElement: function() { 
    // appending click handler directly with jQuery 
    $('.login').click(function() { 
     alert("Hi there."); 
    }); 
} 

後者のハンドラは、周囲のハンドルバーdivに接続し、aではなく、接続します。

Answer 2

javascriptはdomに存在する要素にしかバインドできないという問題があります。新しい要素を追加すると、それらのイベントを再バインドする必要があります。幸いなことに、jQueryはこれにあなたの友人です。

<script> 
$('body').on('click', '.login', function() { 
    alert("Hi there."); 
}); 
</script> 

理想的には、あなたのセレクタには、JavaScriptによって追加されません.loginに最も近い親です。あなたが確信が持てない場合、上記は安全な賭けです