带Om的ScrollSpy

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停止工作。我想我知道为什么。根据自举ScrollSpy：“当使用滚动间谍从DOM中添加或删除元素时，需要调用如下所示的刷新方法：

$('[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]
      ; ...
      )))