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

目前，它似乎工作，直到OM/React.js重新呈现DOM。之后，ScrollSpy停止工作。我想我知道为什么。据Bootstrap ScrollSpy：“当在添加或从DOM元素的结合去除使用scrollspy，你需要调用刷新方法，像这样：”

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

我该怎么办？我想我想钩入Om并告诉它如上所示调用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] 
     ; ... 
    )))