在Ember中的操作中向DOM添加新元素

Question

在Ember中向DOM动态添加新元素的正确方法是什么？例如工具提示。目前我立即渲染所有工具提示，但它们被隐藏并且仅在鼠标上显示，这需要时间来渲染。我可以使用jquery或普通JS在事件上追加元素，它可能会起作用，但它是否是最有效的方法呢？也能很好地使用模板，所以代码不会太大。

Answer 1

直接操作DOM在Ember应用程序中非常禁止。你想让它成为一个Ember组件！

在任何页面，路径或组件模板中：

{{#if showTooltip}}    
  {{tooltip text=someMessage}}
{{/if}}

然后在/pods/components/tooltip/component.js中

export default Ember.Component.extend({
  text: 'hello there! this is a tooltip'
})

最后是组件的模板/pods/component/tooltip/template.hbs

<span class='tooltip-text'>{{text}}</span>

在你的控制环境中，比如一个组件或一个控制器，你可能会有这样的处理程序：

onMouseOver (event) {
  this.set('showTooltip', true)
},

onMouseOut (event) {
  this.set('showTooltip', false)
}

这些处理程序可以是动作，也可以只是组件上的本机事件，基于您想要的任何DOM交互事件触发。

这将为您提供基于模板的工具提示，只有在您将showTooltip属性设置为true时才会在控制上下文中呈现。当你要进入Ember应用程序时，它就像你要求的那样接近。