Javascript 使用余烬刷新语义用户界面不起作用

我在一个Ember应用程序中有一个语义UI sticky rails菜单，我需要在页面完全呈现后刷新它，因为当前当文档高度发生变化时，它会跳出或滚动

setTimeout(function(){
 $('.ui.sticky').sticky({
  offset: 60,
  observeChanges: true,
  silent: true
 });
},2000);

它被包装到setTimeout（）中，以等待加载文档内容，这似乎是当时唯一的解决方法。此外，它还应该在每次向列中添加内容或从列中删除内容时进行刷新，例如，在超时后加载文档图像或用户打开/关闭其中一个手风琴时。为了做到这一点，我尝试了

$('.document-content.column').attr('onresize', "$('.ui.sticky').sticky('refresh')");

捕捉元素大小的更改。不幸的是，这只在调整窗口大小时起作用。正如我已经发现的，没有在加载图像后触发的事件，所以我尝试用domsubtreedinformed监听DOM元素的更改

$('.document-content.column').bind('DOMSubtreeModified', function() {
 $('.ui.sticky').sticky('refresh');
});

这很好，也可以替代脏超时解决方案，但在初始页面加载时非常慢，因为它会被触发很多次。据说DOMSubtreeModified也被弃用，这就是为什么我尝试像这样对观察者进行变异：

var observer = new MutationObserver(function() {
  $('.ui.sticky').sticky('refresh');
});

var observerTarget = document.querySelector('.document-content.column');

var observerOptions = {
  attributes: true,
  childList: true,
  subtree: true
};

observer.observe(observerTarget, observerOptions);

但似乎每次刷新粘性都会再次触发观察者，导致无休止的循环。现在我不知道还能做什么

hbs模板的简短版本：

<div class="ui stackable three column container relaxed grid">
 <div class="twothird wide document-content column">
  {{image-loader}}
  <div class="ui divider"></div>
  <h2 class="cap text">{{text}}</h2>
  <div class="ui relaxed divided accordion">
   <div class="title"></div>
   <div class="content"></div>
  </div>
 </div>

 <div class="widescreen large screen computer only column">
  <div class="ui sticky rail-menu">
   {{document-sidebar}}
  </div>
 </div>
</div>

{{image loader}}
{{text}}
{{document sidebar}}

如果还有什么需要我提供的，请告诉我。我非常感谢能得到的任何帮助。

好的，所以我尝试了

ember-tether

，但没有成功。它打破了我们的整个模板，甚至没有给出错误消息，尽管我喜欢它的想法，它似乎是基于这个想法。灰烬波普尔据称仍在阿尔法，所以根本没有选择。在第一次尝试中，我也尝试了

didRender（）

，但是钩子触发得太早了。另外，

didUpdateAttrs（）

在

didRender（）

之前激发，因此也没有任何帮助

真正起作用的是这个库：

我安装了NPM模块，并在

didInsertElement（）

钩子中运行了

ResizeSensor

的构造函数，该钩子在元素的每次调整大小时都会触发刷新函数，粘性最终不再跳转或滚出边界

import ResizeSensor from 'npm:css-element-queries/src/ResizeSensor';

...

new ResizeSensor($('.document-content.column'), function(){
  $('.ui.sticky').sticky('refresh');
});

---

您是否考虑过使用带有ember插件的定位库？像

ember popper

或

ember栓带

？您可以做的另一件事是requestAnimationFrame循环。但是如果可以的话，可以使用一个附加组件。你知道如何在非余烬中实现这一点吗？你知道组件生命周期挂钩吗？我认为您可以使用didRender和didUpdateAttributes来获得更干净的解决方案