This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-05-23
Channels
- # announcements (12)
- # beginners (225)
- # calva (7)
- # cider (45)
- # clj-kondo (1)
- # cljdoc (1)
- # cljsrn (3)
- # clojure (112)
- # clojure-dev (45)
- # clojure-europe (6)
- # clojure-finland (2)
- # clojure-india (1)
- # clojure-nl (27)
- # clojure-spec (37)
- # clojure-uk (171)
- # clojurescript (39)
- # core-async (9)
- # cursive (22)
- # datascript (8)
- # datomic (50)
- # emacs (12)
- # figwheel-main (17)
- # fulcro (42)
- # garden (2)
- # hoplon (27)
- # jobs (4)
- # kaocha (8)
- # klipse (2)
- # luminus (2)
- # off-topic (9)
- # perun (33)
- # planck (2)
- # re-frame (9)
- # reagent (48)
- # reitit (5)
- # remote-jobs (1)
- # rum (2)
- # shadow-cljs (23)
- # slack-help (3)
- # spacemacs (18)
- # sql (7)
- # tools-deps (24)
- # unrepl (9)
- # vim (30)
@haiyuan.vinurs you’ll have to use (r/as-element item-title)
(defn main-page
[]
[:div
[:> Accordion {:allowMultiple true}
[:> AccordionItem
{:titleTag "div" :title (r/as-element [item-title])}
[item]]]])
Ah, I had forgotten to mention Fragments in React Features documentation page, added now: https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#fragments @borkdude
just posted this in #re-frame. likely better here..
@adamgefen not enough information to help you
it's not clear how you're trying to update your component after the AJAX request completes
You probably need to do something in :component-did-mount
or :component-will-unmount
I can probably give you a toy example in a bit
I do create a component-did-mount
function.. which works fine with static data
(defn homes-did-mount []
(fn []
(let [atm (r/atom nil)
map (.setView (.map js/L "map") #js [36.253 -5.965] 17)
centered (-> (.tileLayer js/L URL-OSM
(clj->js {:attribution attribution
:maxZoom 19}))
(.addTo map))]
(fetch-data! atm)
(for [e @atm]
(-> (circle e)
(.addTo map))))))
excuse the detailed example ...
the fetch-data
calls the ajax
(GET "/transit" {:response-format :json
:keywords? true
:handler (fn [response] (reset! a (transform-df response)))}))
(again sorry for the details, I'm drowning in code...
Ah. You may need (doseq [e @atm] ...)
instead of for
yes yes... I did use doseq
The body of that for
statement might not be evaluated
same with doseq.
I am not experienced with calls from the client side so I was thinking that perhaps it's some ajax peculiarity ( i.e that I'm doing something wrong.. 🙂)
If you’re using re-frame I’d make an event that handles the response coming back
Rather than just reset!
-ing that atom directly
Actually I don’t think you need atoms for this at all. I’ll give a code snippet in a bit
(let [leaflet-map (.map js/L "map")]
(doseq [e (transform-df response)]
(.addTo leaflet-map (circle e))))
That should happen when fetch-data!
returns
just consider that the atom doesn't update in this component (tested with print) and it does in a simple reagent component (div)
Since leaflet is managing state on its end you don’t need to try and have react handle it
Your for/doseq
statement always runs before your AJAX call returns. And since component-did-mount only happens once, you never actually get your update
where then does this doseq
go for the fetch!
to happen first?
(defn homes-did-mount []
(fn []
(let [atm (r/atom nil)
map (.setView (.map js/L "map") #js [36.253 -5.965] 17)
centered (-> (.tileLayer js/L URL-OSM
(clj->js {:attribution attribution
:maxZoom 19}))
(.addTo map))]
(fetch-data! atm))))
(GET "/transit" {:response-format :json
:keywords? true
:handler (fn [response]
(let [leaflet-map (.map js/L "map")]
(doseq [e (transform-df response)]
(.addTo leaflet-map (circle e)))))}))
Putting it in that callback is the only way to ensure you add the points after your AJAX call completes
missing one more step @jimberlage. my then class is defined here:
(defn home
[]
(r/create-class
{:display-name "reactive-map"
:component-did-mount (ajax-did-mount)
:reagent-render (fn [] [:div#map {:style {:height "640px" :width "1024px"}}])})))
and home
then is just added to an (r/render [:div,,,])
What does that code look like?
(defn mount-root []
(r/render
[:div
[:div
[home]
[testing-homes]
[:h1 "Distibution of nests:"]
[oz-viz2]]]
(.getElementById js/document "app")))
the doseq
loop doesn't get evaluated. but the same ajax fetch!
call in a form 1 does, so the problem is in the did-mount
But the handler is definitely getting stepped into? Granted I didn’t see all the code but cljs-ajax has an :error-handler
callback option that may be getting run instead of your handler
now I'm getting some XhrIo,,,
errors so I'll take care of the externs and get back once I solve that.
solved.
Thank you very much. It was just a bit of a tweak.
Is there something like a create-react-app
equivalent for a simple reagent app based on CLI Tools?