Emberjs + 핸들 막대 + 객체 교환 및 이벤트

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> 

- 로그인 관찰자가 작동하지 않습니다. 이미 다른 것들을로드하기 위해 불씨를 사용하고 있습니다 만, 이벤트 관찰자를 다시 바인딩 할 수 있도록 "onChange"이벤트가 있습니까?

Answer 1

큰 질문은 입니다. 왜을 원하십니까? Ember는 jQuery를 사용하지 않고 클릭 핸들러에 대한 뛰어난 지원 기능을 내장하고 있습니다. <script>이 작동하지 않는 이유는 지연된 방식으로 변경 될 수 있으므로 ember는 DOM에보기를 삽입합니다. Ember.View.append()을 수행하면 요소가 나중에 DOM에 삽입됩니다.

그렇다면 여기 jQuery 클릭 핸들러를 didInsertElement()에 붙이려고한다고 생각하는 바이올린이 있습니다. 타다 남은 방법은 바로 click 암시 핸들러 함수를 사용하는 것입니다 그러나

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

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

:

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

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

N.B. 후자의 핸들러는 주위의 핸들 바에 붙이고, 은 아니고, a이 아니라 버블 링합니다.

Answer 2

문제는 javascript가 dom에있는 요소에만 바인딩 할 수 있다는 것입니다. 새 요소를 추가하면 해당 이벤트를 다시 바인딩해야합니다. 운좋게도 jQuery는이 문제에 대한 여러분의 친구입니다.

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

이상적으로, 당신의 선택은 자바 스크립트가 추가되지 않습니다 .login에 가장 가까운 부모입니다. 위의 내용은 확실하지 않은 경우 안전한 내기입니다