Question

我正在使用Bootstrap工具提示来显示绑定到Ember对象的表单。

我可以让表单显示得很好，但我不能为我的生活弄清楚如何保持（双向）绑定工作。

这是我正在使用的代码：

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'
        });
    }
});

我不太了解Ember，但我觉得当模板作为html传递时，数据绑定会丢失：this.$().html()。

有什么方法吗？

编辑：这是小提琴：http://emberjs.jsbin.com/ESItUrOH/1/edit?html,css,js,output

Answer 1

当您致电this.$().html()时，您实际上正在复制视图呈现的HTML并将其插入工具提示。所以，是的，所有绑定都会丢失，因为进入工具提示的副本不再由视图对象管理。

不幸的是，它似乎不像Bootstrap Tooltip API提供了将现有元素显示为工具提示的功能，而无需复制HTML。

使用带有Ember JS模板的Bootstrap工具提示，保持绑定

1 个答案: