Fork me on GitHub

hey guys is it possible to do an ajax call conditionally before rendering an component


(defn render-env-details [env env-name render?] (let [ data (r/atom nil) sanitaized-name (clojure.string/replace-all env-name #"_" "-")] (log "here") (d/get-env-data sanitaized-name data) (fn [] (if render? [:p (-> @data keys)] [:p "nothing to see"]))))


I only want to do the (get-env-data if render is set, render is another atom. The problem I’m having is that the atom never updates


@stbgz this is not working with your specific example, but think it might be helpful:

(defn bar [ratom arg1]
  (get-baz arg1)
  (fn []
    (let [some-data (:some-data @ratom)]
      [:p some-data])))

(defn foo [ratom arg1]
  (let [render? (:render? @ratom)]
     (if render?
       [bar ratom arg1]
       [:p "nothing to see"])]))


if you put the get-env-data call in the bar component, then it will only run on component-will-mount (for bar) if the render? is true


(defn render-env-details [env env-name render?] (let [ data (r/atom nil) sanitaized-name (clojure.string/replace-all env-name #"_" "-")] (if render? (do (d/get-env-data sanitaized-name data) [:div.p "some-data"]) [:div.p "no"] )))


I am getting close


that renders every time the render atom changes, which is triggered through a mouse event


the problem comes when I do this: [:div.p (str @data)] instead of “some-data"


it goes into a infine rendering loop


try to pull it out like i showed


think your do block may run every time render-env-details is rendered


@stbgz If you run this, you can see that "Getting stuff" only prints to the console once, no matter how many times you update the the atom.


I am still learning different parts of reagent


no problem! yeah, it is a a subtlety. the difference between the above snippet and writing foo like this

(defn foo [ratom]
  (let [render? (:render? @ratom)]
     (if render?
         (println "Getting stuff")
         (let [number (:number @ratom)]
           [:p number]))
       [:p "nothing to see yet"])]))
Is just that the former runs the println on bars component-will-mount lifecycle, and the latter runs the println every time on foos render lifecycle


Hi guys, has anyone implemented drag&drop for reagent on mobile? I’m looking at jqueryui + the touch punch plugin, but the import order is so specific, I’m not sure where to start (


@lsenta Take a look at at the draggable recipe in reagent cookbook ( ... if you add the UI Touch Punch to index.html, should work


@gadfly361 what I don’t understand is that the example includes the raw js files, which means that this will break as soon as I compile in release mode with optimizations


That’d be solved by using a cljsjs package, but then I’m pretty sure the touch punch code is not imported at the right time


@lsenta The cookbook recipe doesn't include the raw js files, they are the min version thru a cdn. I did include the touch punch code directly tho. The example also has you compile with minified version, and in this specific case, no externs were needed. You can see other recipes that do include externs tho. Cljsjs is great, and it has jquery-ui if you wanted to use it. I prefer hand rolling externs tho, makes me feel like i know what is used in my code - just a preference.


@lsenta I’ve encountered weird behavior when combining jquery-ui and react, basically re-rendering on drop was wonky unless the list items had unique keys. This is the project in question (when you click on links in the sidebar, you’ll create sortable columns) - and here is the hack I did to make it work as expected


I got it working: used the cljsjs package for jquery-ui, and included the touchpunch code after my app.js, that was easier than I expected


<script src="js/compiled/app.js"></script>
<script src="/assets/jquery.ui.touch-punch.min.js"></script>


Thanks for the guidance @gadfly361, tbh everything that touches the cljs compiler, externs and cljsjs has been more of an annoyance so far, I’m trying to avoid it as much as possible. 😕


And thanks for the warning @mihaelkonjevic! I encountered something similar when working with reframe subscriptions, it’s nice to have your code as a starting point 🙂


@lsenta You may have seen this, but just in case, it is a great tutorial on javascript dependencies. Think it walks thru externs really well: