ScrollSpy with 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에 따르면

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

어떻게해야합니까 : "추가하거나 DOM에서 요소의 제거와 함께 scrollspy를 사용하는 경우, 당신은 너무 같은 새로 고침 메서드를 호출해야합니다"? 위에서 옴과 연결하여 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] 
     ; ... 
    )))