Question

我在带有查询参数的页面上使用基础工具提示 - 它们控制显示哪些元素，基本上充当过滤器。

当用户更改过滤器并显示新元素时，工具提示停止工作，因为它需要重新连接到新元素 - $(document).foundation('tooltip', 'reflow');所以我想知道在重新渲染视图后执行此代码的正确方法是什么

当然，这必须转到视图层，但我找不到合适的事件http://emberjs.com/api/classes/Ember.View.html#events

Answer 1

使用像这样的观察者函数：

$document: Ember.computed( function() {
  return $(document);
}),

updateTooltips: Ember.observer('theFilter', function() {
  Ember.run.later( function() {
    this.get('$document').foundation('tooltip', 'reflow');
  }.bind(this));
})

作为进一步改进，您可以将工具提示代码抽象为服务。

Answer 2

我可以想到几个方法

export default Ember.Route.extend({
    queryParams: {
      <name-of-query-param>: { refreshModel: true }
    }

或route上有触发器this.refresh()。

或者在控制器中，观察查询参数并在loop

中执行事件

Answer 3

您可以将每个元素包装在Component中并使用didInsertElement事件。您可以访问组件的jQuery对象this.$()

export default Ember.Component.extend({

  setTooltip: function() {
    this.$(). ... //here your jQuery
  }.on('didInsertElement')

});

在视图更改后执行JQuery代码

3 个答案: