如何使用Ember动态地将新模板插入DOM？

Question

我有一个Ember.js应用程序.在主模板中,我有一个帮助按钮,单击时应显示CSS工具提示.我有工具提示是一个单独的Handlebars模板.

我正在尝试做的是处理click事件以将弹出窗口插入DOM并显示它.我无法弄清楚如何使用Ember将新模板插入DOM.

这是我的模板,其中显示帮助按钮:

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

这是我的主要观点:

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

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

所以我不确定在事件处理程序中做什么来呈现工​​具提示模板并将其注入要显示的DOM中.

Answer 1

您可以使用Ember.View's' append或appendTo方法创建新视图并将其附加到DOM .

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