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

问题描述

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

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

这是我的模板，显示帮助按钮：

 < div id =status_helpclass =icon_help{{actionhelpClicked}}>< / div> 
  

这是我的主要观点：

  var checkbox = Ember.Checkbox.extend（{
 templateName：'checkbox'，
 helpClicked：function（e）{
 //不确定该怎么做这里
} 
}））; 
 
 var tooltip = Ember.View.extend（{
 templateName：'tooltip'
}）; 
  

所以我不知道在事件处理程序中做什么来渲染工具提示模板并注入它进入要显示的DOM。

解决方案

您可以创建一个新视图，并使用 Ember.View 的追加或 appendTo 方法。

  App.MyView = Ember.View.extend（{
 templateName：'a_template'
}）
 
 var view = App.MyView.create（）; 
 
 //将视图附加到文档正文
 view.append（）; 
 // ...或附加到使用
 // jQuery兼容的选择器描述的任何元素。 
 view.appendTo（'＃my-div'）; 
  

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.

解决方案

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屋！