使用 Ember 刷新语义 UI 粘滞不起作用

Question

我在 Ember 应用程序中有这个语义 UI 粘性栏菜单，我需要在页面完全呈现后刷新，因为当前它在文档高度更改时跳转或滚动出界。

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

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

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

以捕获元素大小的变化。不幸的是，这仅在调整窗口大小时才有效。正如我已经发现的那样，图像加载后没有触发的事件，所以我尝试使用 DOMSubtreeModified 监听 DOM 元素的变化。

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

这工作正常，也可以替代脏超时解决方案，但它在初始页面加载时非常慢，因为它被触发了很多次。据说 DOMSubtreeModified 也被弃用了，这就是为什么我尝试了这样的 MutationObserver：

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

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

哈佛商学院模板的简短版本：

<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>

如果还有什么我应该提供的，请告诉我。我很感激我能得到的任何帮助。

Answer 1

好的，所以我尝试了ember-tether，但它不起作用。它甚至没有给出错误消息就破坏了我们的整个模板，尽管我喜欢 tether.io 的想法，它似乎是基于它的。据称，Ember-popper仍处于alpha阶段，因此根本没有选择。我也在第一次尝试中尝试了didRender()，但钩子发射得太早了。另外，didUpdateAttrs()在didRender()之前开火，所以也无济于事。

真正起作用的是这个库：

http://marcj.github.io/css-element-queries/

我安装了 NPM 模块并在didInsertElement()钩子中运行了ResizeSensor的构造函数，该函数在每次调整元素大小时都会触发刷新函数，粘性最终不再跳跃或滚动出界。

import ResizeSensor from 'npm:css-element-queries/src/ResizeSensor';
...
new ResizeSensor($('.document-content.column'), function(){
$('.ui.sticky').sticky('refresh');
});