How can I dynamically insert a new template into the DOM with Ember?

ember.js, handlebars.js, jquery

Solution

You can create a new view and append it to the DOM using `Ember.View`'s `append` or `appendTo` methods.

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

Problem

I have an Ember.js app. In the main template I have a help button that when clicked should display a CSS tooltip. I have the tooltip is a separate Handlebars template. What I'm trying to do is handle the click event to insert the popup into the DOM and display it. I cannot figure out how to insert new templates into the DOM using Ember. Here's my template where the help button is displayed: ``` <div id="status_help" class="icon_help" {{action "helpClicked"}}></div> ``` Here's my primary view: ``` var checkbox = Ember.Checkbox.extend({ templateName: 'checkbox', helpClicked: function(e) { // Not sure what to do here } })); var tooltip = Ember.View.extend({ templateName: 'tooltip' }); ``` So I'm not sure what to do in the event handler to render the tooltip template and inject it into the DOM to be displayed.

Original source