Обновление семантического интерфейса, привязанного к Ember, не работает - PullRequest
Новая
       8

Обновление семантического интерфейса, привязанного к Ember, не работает

0 голосов
/ 29 июня 2018

Хорошо, у меня есть меню привязок Semantic UI в приложении Ember, которое мне нужно обновить после полной визуализации страницы, потому что в данный момент она выпрыгивает или прокручивается из границы при изменении высоты документа. 

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

Он заключен в setTimeout () для ожидания загрузки содержимого документа, что, казалось, было единственным обходным решением в то время. Также предполагается обновлять каждый раз, когда содержимое добавляется или удаляется из столбца, например, когда изображение документа загружается по истечении времени ожидания или когда один из аккордеонов открывается / закрывается пользователем. Для достижения этой цели я попытался 

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

чтобы отследить изменения в размере элемента. К сожалению, это работает только при изменении размера окна. Как я уже выяснил, после загрузки изображений событие не срабатывает, поэтому я попытался прослушать изменения элемента DOM с помощью DOMSubtreeModified. 

$('.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>

Если есть что-то еще, что я должен предоставить, пожалуйста, скажите мне. Я благодарен за любую помощь, которую я могу получить.

1 Ответ

0 голосов
/ 03 июля 2018

Хорошо, поэтому я попытался ember-tether, и это не сработало. Это скорее сломало весь наш шаблон, даже не выдав сообщения об ошибке, хотя мне нравится идея tether.io , на которой он, по-видимому, основан. Ember-popper, как утверждается, все еще находится в альфа-версии, так что это был не вариант. Я также попробовал didRender() в одной из первых попыток, но крюк сработал слишком рано. Кроме того, didUpdateAttrs() срабатывает до didRender(), поэтому это тоже не помогло.

Что действительно помогло, так это библиотека:

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

Я установил модуль NPM и запустил конструктор для ResizeSensor в хуке didInsertElement(), который запускает функцию обновления при каждом изменении размера элемента, и закрепление, наконец, больше не выпрыгивает или прокручивается из границы. 

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

...

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