如何使用 Ember 将新模板动态插入到 DOM 中? [英] How can I dynamically insert a new template into the DOM with Ember?

问题描述

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

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.

我想做的是处理单击事件以将弹出窗口插入 DOM 并显示它.我不知道如何使用 Ember 将新模板插入到 DOM 中.

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>

这是我的主要观点:

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

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

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

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.

推荐答案

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

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

这篇关于如何使用 Ember 将新模板动态插入到 DOM 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！