Question

on didInsertElement我已经初始化了bootstrap popover并且它运行正常，直到我运行一个动作即提交表单，在我将表格数据保存在db后我发出请求从api获取当前保存的数据然后我使用它。 set（）为用户实时更新模型...但是在我使用this.set（）之后，popover会破坏...以便更好地解释它我将使用下面的示例：

<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中的popover不再有效..

更新：这是我调用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所述）重新初始化您的侦听器。每当新元素进入DOM时，didInsertElement都不会运行，只有在元素准备就绪后第一次插入视图时，它才会运行。

重新设置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更改时随时设置侦听器。但观察者可能很难管理。

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

ember js this.set（）破解bootstrap插件

1 个答案: