🥇 Dica de ferramenta de bootstrap - como lidar com assincronia

Digamos que titledeve ser dinâmico. Nossa primeira tomada pode ser a seguinte (acho que agora pode ser um componente Ember, mas não consigo descobrir a diferença):

App.TooltipView = Ember.View.extend
    template: Ember.Handlebars.compile '<span class="glyphicon glyphicon-question-sign"   </span>'
    tagName: 'a'
    classNames: ['tooltip']
    attributeBindings: ['href', 'data-toggle', 'title']
    href: '#'
    'data-toggle': 'tooltip'
    didInsertElement: ->
        @$().tooltip()

O problema é que os dados ainda podem estar inacessíveis quando o View é inserido no DOM. Como a dica de ferramenta usa o data-original-titleatributo internamente para exibir o conteúdo da dica de ferramenta, a solução é um passeio no parque:

App.TooltipView = Ember.View.extend
    template: Ember.Handlebars.compile '<span class="glyphicon glyphicon-question-sign"   </span>'
    tagName: 'a'
    classNames: ['tooltip']
    attributeBindings: ['href', 'data-toggle', 'data-original-title']
    href: '#'
    'data-toggle': 'tooltip'
    didInsertElement: ->
        @$().tooltip()

Como você pode ver, podemos até mesmo fazer sem título:

{{view App.TooltipView data-original-titleBinding="popover"}}

Agora, quando os dados estão prontos, o conteúdo pode ser exibido normalmente.

Related Posts