Using Bootstrap tooltips with Ember JS template, keeping bindings

Question

I am using Bootstrap tooltips to display a form bound to an Ember object.

I can get the form to display just fine , but I can't for the life of me figure out how to keep the (two way) bindings working.

Here's the code that I'm using:

reservation.hbs

<div>
  <span>{{lastName}}</span>
  <span>{{firstName}}</span>
</div>

{{view App.ReservationFormView}}

reservationForm.hbs

<form class="reservation-form form-horizontal" role="form">
  <label>First Name</label>
  {{input type="text" value=firstName }}

  <label>Last Name</label>
  {{input type="text" value=lastName}}
</form>

reservationFormView.js

App.ReservationFormView = Em.View.extend({
    templateName: 'reservationForm',
    classNames: ['hidden'],
    didInsertElement: function() {
        this.$().closest(".gf-sticker").tooltip({
            title: return this.$().html(),
            html: true,
            placement: 'auto',
            trigger: 'click'
        });
    }
});

I don't know Ember well enough, but I feel like the data binding is lost when the template is passed as html: this.$().html().

Is there any way around this ?

---

Edit: Here's the fiddle: http://emberjs.jsbin.com/ESItUrOH/1/edit?html,css,js,output

Answer 1

When you call this.$().html() you're effectively copying the view's rendered HTML and inserting it into the tooltip. So yes, all of the bindings are lost because the copy that goes into the tooltip is no longer being managed by your view object.

Unfortunately, it doesn't look like the Bootstrap Tooltip API offers the ability to show an existing element as a tooltip, without copying the HTML.