This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-10-18
Channels
- # 100-days-of-code (6)
- # announcements (4)
- # beginners (126)
- # cider (49)
- # cljdoc (28)
- # cljsrn (3)
- # clojure (89)
- # clojure-dev (19)
- # clojure-greece (2)
- # clojure-italy (13)
- # clojure-mexico (1)
- # clojure-nl (13)
- # clojure-spec (108)
- # clojure-sweden (1)
- # clojure-uk (48)
- # clojurescript (31)
- # cloverage (3)
- # core-async (16)
- # cursive (28)
- # data-science (3)
- # datascript (1)
- # datomic (60)
- # defnpodcast (1)
- # docker (17)
- # editors (18)
- # emacs (16)
- # events (1)
- # figwheel (22)
- # figwheel-main (4)
- # graphql (26)
- # jobs (2)
- # off-topic (9)
- # om-next (2)
- # overtone (4)
- # perun (1)
- # re-frame (2)
- # reagent (18)
- # reitit (1)
- # ring-swagger (2)
- # shadow-cljs (2)
- # tools-deps (49)
- # uncomplicate (1)
- # unrepl (1)
- # vim (2)
Hi folks. I want to listen for Bootstrap (4) collapse element events in ClojureScript. In JS, example goes like this:
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})
In CLJS, I create the element thus:
[:div.collapse {:id "outdoors" :on.hidden.bs.collapse #(.log js/console "hidden")}
[:h1 "title"]]
which of course doesn't work. React.js output = Unknown event handler property onHidden.bs.collapse. It will be ignored.
.
Not sure how to name such an event in a Reagent->React-compliant way.I assume that Bootstrap event is the nested child of some event tree.
@gamecubate you’ll want to create a form-3 component, set a ref
on the div and then, in componentDidMount
, use ref.addEventListener
sorry i’m back to programming in typescript, so it’d be (.addEventListener ref ...)
The argument to that listener would take the form
(-> js/hidden .-bs .-collapse)
?it’s just a callback. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
I assume the .on
is implemented with addEventListener
under the covers, but there might be some other way
correct. I usually name my CLJS handlers per the standard :on-click, :on-change, :on-window-resize nomenclature. Just not sure how to express hidden.bs.collapse events
ohhhhhh
I see
this is a good trail. thanks a bunch.
the :on-click
stuff is built into the react virtual dom api, but the bootstrap stuff won’t be part, so you’ll have to reach down to the js dom api
thanks!