Ember.js의 DOM에 특정 요소를 어떻게 추가합니까?

Question

스타일을 지정하기 위해 다른 div에 마우스를 올려 놓을 때 오버레이 역할을하는 div를 만들고 싶습니다.

하나의 요소에 MouseIn 및 MouseOut을 캡처하기 위해 맞춤 이벤트를 사용할 계획이었습니다.

그런 다음 다른 모든 섹션 앞에 div를 만들어 오버레이로 작동하여 포커스를 벗어난 것으로 표시합니다.

기본적으로 내 템플릿에, 나는

{{#each answers}} 
    {{render "simpleSearchAnswer" this}} 
{{/each}} 

을 그리고 그 하위 뷰 템플릿 거시기는 다음과 같습니다

<li class="questioncontainer"> 
    <div {{action "select" this}} class="questiontile"> 
     <div class="row questiontitle"> 
      <p><span>{{title}}</span> 
      <i class="icon-info-circled"></i></p> 
     </div> 
     <div class="row questiondescription"> 
      <p><span>{{description}}</span> 
      </p> 
     </div> 
    </div> 
</li> 

내가 역할을 할 수있는 상단에 새로운 사업부를 추가 할

<li class="questioncontainer"> 
    <!-- NEW STUFF BELOW--> 
    <div class="overlay"></div> 
    <!-- NEW STUFF ABOVE --> 

    <div {{action "select" this}} class="questiontile"> 
     .... 

좋아하지만 사용자가 응용 프로그램으로 작업하는 동안, 아니 전, 렌더링 후 오버레이.

본질적으로 제가 묻는 것은 Ember.js를 동적으로 사용하여 div를 추가 할 수 있습니까? 렌더링 후?

Answer 1

"simpleSearchAnswer"에 대한 사용자 지정보기를 정의하고 MouseEnter 및 MouseLeave 메서드를 정의한 다음 JQuery를 사용하여 필요한 작업을 수행 할 수 있습니다. 같은

뭔가 :

App.SimpleSearchAnswerView = Em.View.extend({ 

    mouseEnter: function(){ 
     //jquery to add your div 
    }), 

    mouseLeave: function(){ 
     //jquery to remove your div 
    }) 

}); 

당신은 this.$()

http://emberjs.com/api/classes/Ember.View.html는 "이벤트 이름"에서 사용할 수있는 모든 이벤트의 목록이 있습니다 사용하여보기의 jQuery 오브젝트에 액세스 할 수 있습니다.