Come posso inserire dinamicamente un nuovo modello nel DOM con Ember?

Question

Ho un'app Ember.js. Nel modello principale ho un pulsante di aiuto che quando cliccato dovrebbe mostrare un suggerimento CSS. Ho il tooltip è un modello di Handlebars separato.

Quello che sto cercando di fare è gestire l'evento click per inserire il popup nel DOM e visualizzarlo. Non riesco a capire come inserire nuovi modelli nel DOM usando Ember.

Ecco il mio modello in cui viene visualizzato il pulsante di aiuto:

<div id="status_help" class="icon_help" {{action "helpClicked"}}></div> 

Ecco la mia vista primaria:

var checkbox = Ember.Checkbox.extend({ 
    templateName: 'checkbox', 
    helpClicked: function(e) { 
     // Not sure what to do here 
    } 
})); 

var tooltip = Ember.View.extend({ 
    templateName: 'tooltip' 
}); 

, quindi non sono sicuro di cosa fare nel gestore di eventi per rendere il tooltip modello e iniettarlo nel DOM per essere visualizzato.

Answer 1

È possibile creare una nuova vista e aggiungerla al DOM utilizzando i metodi Ember.Viewappend o appendTo.

App.MyView = Ember.View.extend({ 
    templateName: 'a_template' 
}) 

var view = App.MyView.create(); 

// Append the view to the document body 
view.append(); 
// ...or append to any element described using 
// a jQuery-compatible selector. 
view.appendTo('#my-div');