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

Question

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

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

它被包装成一个setTimeout()来等待文档内容加载，这似乎是当时唯一的解决方法。此外，每次向列添加内容或从列中删除内容时，都应该刷新，例如，当文档图像在超时后加载或手风琴之一被用户 opened/closed 时。为此，我尝试了

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

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

监听 DOM 元素变化

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

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

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

但是好像每次刷新sticky都会再次触发observer，造成死循环。现在我不知道还能做什么。

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>

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

Answer 1

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

真正起作用的是这个库：

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

我在 didInsertElement() 挂钩中安装了 NPM 模块和运行 ResizeSensor 的构造函数，它会在每次调整元素大小时触发刷新功能，而粘性最终不会'不要再跳或滚出边界了。

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

...

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

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

Refreshing Semantic UI sticky with Ember does not work

javascript

jquery

dom

ember.js

semantic-ui

真正起作用的是这个库：