ScrollSpy with Om
问题描述:
我希望Om能与ScrollSpy一起使用。ScrollSpy with Om
我目前使用此代码:
(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元素的结合去除使用scrollspy,你需要调用刷新方法,像这样:”
$('[data-spy="scroll"]').each(function() {
var $spy = $(this).scrollspy('refresh');
});
我该怎么办?我想我想钩入Om并告诉它如上所示调用ScrollSpy。
答
我做了一些改变,以使其工作。
首先,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]
; ...
)))