在Ember中将新元素添加到DOM中

Question

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

Answer 1

在Ember应用程序中，直接操作DOM非常重要。 您当然想使其成为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应用程序中获得的要求一样接近。