Wie kann ich dynamisch eine neue Vorlage mit Ember in das DOM einfügen?

Question

Ich habe eine Ember.js App. In der Hauptvorlage habe ich eine Hilfe-Schaltfläche, die beim Anklicken einen CSS-Tooltip anzeigen soll. Ich habe den Tooltip als separate Lenkervorlage.

Ich versuche, das Click-Ereignis zu behandeln, um das Popup in das DOM einzufügen und es anzuzeigen. Ich kann nicht herausfinden, wie man neue Vorlagen mit Ember in das DOM einfügt.

Hier ist meine Vorlage, wo die Hilfe-Taste angezeigt wird:

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

Hier ist meine primäre Ansicht:

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

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

Also ich bin nicht sicher, was in der Event-Handler zu tun, um die Tooltip zu machen Vorlage und injizieren Sie es in das anzuzeigende DOM.

Answer 1

Sie können eine neue Ansicht erstellen und sie an das DOM anhängen, indem Sie die Methoden Ember.Viewappend oder appendTo verwenden.

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');