ScrollSpy с Омом

Я хочу, чтобы 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, как показано выше.


reactjs twitter-bootstrap scrollspy om
person David J.    schedule 20.09.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я сделал несколько изменений, чтобы заставить это работать.

Во-первых, 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]
      ; ...
      )))
person David J.    schedule 20.09.2014