Question

我有一个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？

Answer 1

在其模板中使用Component代替tagName: 'span'创建<span>：

组件：

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.

停止div内的Ember辅助渲染

1 个答案: