ScrollSpy с Om

Question

Я хотел бы получить Om для работы с ScrollSpy.

В настоящее время я использую этот код:

(defn main-component 
    [data owner] 
    (om/component 
    (dom/div 
     #js {:className "col-sm-10 col-sm-offset-2 col-md-10 col-md-offset-2 main"} 
     (dom/div 
     #js {:className "main-panel" 
      :data-spy "scroll" 
      :data-target ".nav-sidebar"} 
     "...")))) 

(defn sidebar-component 
    [data owner] 
    (om/component 
    (dom/div 
     #js {:className "container-fluid"} 
     (dom/div 
     #js {:className "row"} 
     (dom/div 
      #js {:className "col-sm-2 col-md-2 sidebar"} 
      (dom/div 
      #js {:className "nav-sidebar"} 
      (dom/ul 
       #js {:className "nav"} 
       (dom/li nil (dom/a #js {:href "#thing-1"} "Thing 1")) 
       (dom/li nil (dom/a #js {:href "#thing-2"} "Thing 2")) 
       (dom/li nil (dom/a #js {:href "#thing-3"} "Thing 3")) 
      ))))))) 

(defn app-component 
    "The top-level Om component." 
    [data owner] 
    (om/component 
    (om/build 
     (common/app-template 
     (om/build sidebar-component data) 
     (om/build main-component data)) 
     data))) 

В настоящее время, кажется, работает до тех пор, Ом/React.js повторно не делает DOM. После этого ScrollSpy перестает работать. Кажется, я знаю, почему. По Bootstrap ScrollSpy: «При использовании scrollspy в сочетании с добавлением или удалением элементов из DOM, вам нужно вызвать метод обновления как так:»

$('[data-spy="scroll"]').each(function() { 
    var $spy = $(this).scrollspy('refresh'); 
}); 

Что я должен делать? Я думаю, что хочу подключиться к Ом и сказать ему, чтобы вызвать ScrollSpy, как показано выше.

Answer 1

Я сделал несколько изменений, чтобы заставить это работать.

Во-первых, ScrollSpy необходимо связать с элементом прокрутки, например. тело, а не элемент, вложенный внутри. Поэтому я удалил статические атрибуты из «основной панели», показанной выше (например, main-component). Затем я покажу, как использовать сценарии для привязки к элементу body.

Во-вторых, я добавил обработчики для IDidMount и IDidUpdate следующим образом:

(defn app-component 
    [data owner] 
    (reify 
    om/IDidMount 
    (did-mount 
     [this] 
     (.log js/console "did-mount") 
     (-> (js/$ "body") 
      (.scrollspy #js {:target ".nav-sidebar"}))) 

    om/IDidUpdate 
    (did-update 
     [this prev-props prev-state] 
     (.log js/console "did-update") 
     (-> (js/$ "body") 
      (.scrollspy "refresh"))) 

    om/IRender 
    (render 
     [this] 
     ; ... 
    )))