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停止工作。我想我知道为什么。根据{{3}}：＆＃34;当使用scrollspy与添加或删除DOM中的元素一起使用时，您需要像这样调用刷新方法：＆＃34;

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

ScrollSpy with Om

1 个答案: