带有 Om 的 ScrollSpy答案

【问题标题】：ScrollSpy with Om带有 Om 的 ScrollSpy
【发布时间】：2014-11-15 03:10:41
【问题描述】：

我想让 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：“当使用 scrollspy 并从 DOM 中添加或删除元素时，您需要像这样调用刷新方法：”

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

我该怎么办？我想我想挂接到 Om 并告诉它调用 ScrollSpy，如上所示。

【问题讨论】：

标签： twitter-bootstrap reactjs scrollspy om

【解决方案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]
      ; ...
      )))

【讨论】：