Как добавить определенный элемент в DOM в Ember.js?

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> 

Я хотел бы, чтобы добавить новый DIV в верхней части, чтобы выступать в качестве наложение, например

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

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

Но после рендеринга, а не раньше, когда пользователь работает с приложением.

Я предполагаю, что я спрашиваю, возможно ли добавить div с использованием Ember.js динамически? После рендеринга?

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 
    }) 

}); 

Вы можете получить доступ к объекту Jquery вашего зрения с помощью this.$()

http://emberjs.com/api/classes/Ember.View.html имеет список всех событий, которые вы можете использовать в разделе «Имена событий».