CODEWITHSUNDEEP
ember.jshandlebars.js
Sam
Sam

Reputation: 4339

Stop Ember helper rendering inside div

I have an Ember helper which is literally defined as this:

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

It's used to render a Bootstrap tooltip. It renders the following 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>

How can I stop the helper rendering the containing div?

Upvotes: 1

Views: 477

Answers (1)

Daniel
Daniel

Reputation: 18680

Create a Component with tagName: 'span' instead of <span> in it's template:

Component:

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

Now, you can use following:

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

Which produces following 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>

Notice you can still use bindings(data-title=text):

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

Working demo.

Upvotes: 4

Related Questions