ember js this.set（）破坏了Bootstrap插件

Question

在didInsertElement上，我已经初始化了引导程序弹出窗口，并且在我执行操作（即提交表单）之前，它工作正常，在将表单数据保存到db后，我请求从api获取当前保存的数据，然后使用this.set（）为用户实时更新模型...但是，在我使用this.set（）之后，弹出窗口会中断...为更好地解释它，我将使用以下示例：

<form {{action 'saveForm' on='submit'}}>
   {{input type="text" value=firstName class="form-control" placeholder="Firstname"}}
   <button type="submit" class="btn btn-success" >Submit</button>
</form>

{{#each firstname in model.firstNames}}
  <span data-toggle="popover" data-title="Firstname" data-content="{{unbound firstname}}" data-placement="top">Firstname</span>
{{/each}}

使用this.set（）后，＃each内部的弹出框不再起作用。

更新：这是我调用this.set（）的操作

App.firstNamesController = App.AppController.extend({
    actions: {
        updateFirstnames: function () {
            $.getJSON('/api/firstnames/get/', function (jsonResponse) {
                this.set('firstNames', jsonResponse.data.firstNames);
            }.bind(this));
        }
    }
});

更新＃2：

App.firstNamesView = Ember.View.extend({
    templateName: 'firstNamesTemplate',
    didInsertElement: function() {
        $('span[data-toggle="tooltip"]').tooltip({
            trigger: 'click'
        });
    }
});

Answer 1

设置新名称后，您需要（如Jeff所述）重新初始化您的侦听器。 didInsertElement不会在每次新元素进入DOM时都运行，而只是在元素准备好后第一次插入视图时才运行。

设置侦听器后，重新设置firstNames新元素添加到DOM中，因此不会在其上设置侦听器。

未经测试的解决方案：

App.firstNamesController = App.AppController.extend({
  actions: {
    updateFirstnames: function() {
      $.getJSON('/api/firstnames/get/', function(jsonResponse) {
        this.set('firstNames', jsonResponse.data.firstNames);

        // add this after setting names:
        Ember.run.next(this, function () {
          $('span[data-toggle="tooltip"]').tooltip();
        });
      }.bind(this));
    }
  }
});

另外，您的jQuery中的选择器的目标是span[data-toggle="tooltip"]但您的模板具有span[data-toggle="popover"] -这是拼写错误吗？

编辑1

另一个选择是观察model.firstNames属性，并在model.firstNames更改时model.firstNames设置监听器。 但是观察者可能很难管理。

// in your controller:
toolTipObserver: function () {
  Ember.run.next(this, function () {
    $('span[data-toggle="tooltip"]').tooltip();
  });
}.observes('model.firstNames')