0

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 からの要素の追加または削除と組み合わせて使用​​する場合は、次のように更新メソッドを呼び出す必要があります。」

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

私は何をすべきか？上記のように、Om にフックして、ScrollSpy を呼び出すように指示したいと思います。

4

1 に答える 1

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]
      ; ...
      )))
于 2014-09-20T23:31:26.413 に答える