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也已弃用，这就是为什么我尝试像这样的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);

但是似乎每次粘滞的刷新只会再次触发观察者，从而导致无休止的循环。现在我不知道该怎么办。

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的想法，但它似乎是基于http://marcj.github.io/css-element-queries/的，它甚至破坏了整个模板，甚至没有给出错误消息。据说Ember-popper仍处于alpha状态，因此根本没有选择。我还尝试了didRender()的第一次尝试，但是钩子触发得太早了。另外，didUpdateAttrs()在didRender()之前触发，因此也无济于事。

真正的窍门是这个库：

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

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

...

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

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

1 个答案:

真正的窍门是这个库：