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

Question

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.

Answer 1

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