在 div 中停止 Ember 助手渲染答案

【问题标题】：Stop Ember helper rendering inside div在 div 中停止 Ember 助手渲染
【发布时间】：2015-01-21 08:32:14
【问题描述】：

我有一个 Ember 助手，它的字面意思是这样的：

<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" data-title="{{text}}"></span>

它用于呈现 Bootstrap 工具提示。它呈现以下 HTML：

<div id="ember572" class="ember-view">
    <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" 
       data-title="<script id='metamorph-35-start' type='text/x-placeholder'></script>
           When a project is archived, no new items can be created in it.
           <script id='metamorph-35-end' type='text/x-placeholder'></script>" 
           data-original-title="" title="" aria-describedby="tooltip416856">
    </span>
</div>

如何停止助手渲染包含的 div？

【问题讨论】：

你能把代码放在你如何渲染工具提示上吗？
这只是引导工具提示。如果我将该跨度直接放入模板中（但不在帮助程序中），则不会生成额外的 div。
发布帮助代码或在 emberjs.jsbin.com 上创建一个失败的演示
它真的是助手还是组件？如果是组件，那么答案会更容易
它是一个助手——它可以是一个组件吗？

标签： ember.js handlebars.js

【解决方案1】：

在其模板中使用tagName: 'span' 而不是<span> 创建一个Component：

组件：

App.TooltipElementComponent = Em.Component.extend({
  tagName: 'span',
  attributeBindings: ['data-toggle', 'data-placement', 'data-title']
});

现在，您可以使用以下内容：

{{tooltip-element data-toggle='tooltip' data-placement='right' data-title='When a project is archived, no new items can be created in it.'}}

生成以下 HTML：

<span id="ember257" class="ember-view" data-toggle="tooltip" data-placement="right" data-title="When a project is archived, no new items can be created in it."></span>

请注意，您仍然可以使用绑定(data-title=text)：

{{tooltip-element data-toggle='tooltip' data-placement='right' data-title=text}}

Working demo.

【讨论】：