This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2015-07-28
Channels
- # admin-announcements (28)
- # beginners (30)
- # boot (6)
- # cljs-dev (48)
- # clojure (72)
- # clojure-android (8)
- # clojure-australia (1)
- # clojure-italy (9)
- # clojure-japan (12)
- # clojure-russia (21)
- # clojure-sg (1)
- # clojurescript (109)
- # core-async (11)
- # core-logic (17)
- # cursive (33)
- # datascript (1)
- # datomic (30)
- # dunaj (4)
- # editors (38)
- # events (1)
- # ldnclj (17)
- # off-topic (156)
- # om (2)
- # overtone (1)
- # re-frame (2)
- # reagent (63)
@ulsa I find https://github.com/Prismatic/dommy useful, usually as an on-ramp to seeing how to use the underlying Google Closure library
specifically https://github.com/Prismatic/dommy/blob/master/src/dommy/core.cljs#L282
I'm trying to make a button change text based on an atom. anyone have a simple example I can look at?
All you should need is to deref the atom (make sure it is a reagent atom, I have been bit by this a few times). This isnt exactly what you asked, but could be useful: https://github.com/reagent-project/reagent-cookbook/blob/master/recipes/toggle-class/README.md
The class is updated on change of atom with a deref. You can do somethinf similar and store the text in the atom and then deref in the spot for the buttons text.
but now it's not updating when the atom changes.... in the (sub)component I'm doing (if (@state :in-progress) "Foo" "Bar")
. Does that not bypass the change propagation? (still learning how reagent is wired together..)
I've been changing out buttons, which might look the same but have different text.
(defn one-button [showme]
(fn []
[:input {:class "btn btn-info palette-turquoise"
:type "button"
:on-click #(.-preventDefault (swap! showme not))}]))
(defn switch-buttons [atom default alternative]
(fn []
(if @atom
default
alternative)))
(def my-page []
(let [showme (atom true)]
[switch-buttons showme [one-button showme] [other-button]]))
Along those lines, possibly inelegant but hey.
This is what is now (I think) working:
(defn analyze-button []
[:button {:on-click nil} (if (@state :analyzing) "Analyzing..." "Analyze!")])
Ah, interesting, I'll play around with this way of doing it ... progress spinner would be sweet 😎
#(if (= @state :text) "foo") (swap! state assoc :text "bar") (swap! state assoc :text "foo"))
my on-click actually needs to kick off the analysis call. Now it's irritating that I have to put (if (@state :analyzing) ...)
in 3 places in the button component. capturing it in a let blocks the update propagation, sort of expectedly.
Since the deref happens above the button component, it will rerender whole thing when atom changes
aaah... so something like:
(defn analyze-button [analyzing?]
[:button (if analyzing? "foo" "bar")])
and call it like:
[analyze-button (@state :analyzing?)]
?so if I call (swap! state assoc :analyzing? true)
in my on-click function, it works (changes the atom) but the updates don't propagate.
Just finished the re-frame ReadMe. It was very much enlightening.
One of the best reads of this year.
This is the whole thing:
(defn do-analyze []
(swap! state assoc :analyzing? true)
(println "Analyzing!"))
(defn analyze-button [analyzing?]
[:button {:on-click do-analyze
:class (when analyzing? "disabled")
:disabled analyzing?}
(if analyzing? "Analyzing..." "Analyze!")])
(def note-form-template
[:div.row
[:textarea {:field :textarea
:id :note-text}]
[:br]
[analyze-button (@state :analyzing?)]])
(defn clinical-note-form []
[:div
[bind-fields clinical-note-form-template state]])
setting it from the figwheel repl doesn't propagate now either. no idea what's going on.
Hey everyone — is this a good place to ask for help? I wrote about 15 lines of cljs/reagent and can't figure out why the value of an atom is not showing in the UI.
This is a good place to ask questions! (Sometimes questions get buried in convos, so just re-ask if your thread gets lost). Im away from keyboard for a while or id try to help out too.
@gadfly361: Thanks!
Here it is:
1 (ns cljs.todos.core)
2
3 (def new-todo (atom {:text ""}))
4
5 (defn- update-new-todo [event]
6 ;;(.log js/console (.-target.value event))
7 (swap! new-todo assoc :text (.-target.value event))
8 (.log js/console (str "New todo value: " (:text @new-todo))))
9
10 (defn add-todo [todos]
11 [:div
12 [:textarea {:cols "35" :rows "5" :on-change update-new-todo}]
13 [:div
14 [:button {:on-click #(swap! todos conj @new-todo)} "Add to list"]]
15 [:p (str "Preview: " (:text @new-todo))]])
I can see that the new-todo
atom gets updated, but line 15 isn't showing the value for some reason!thanks for spotting it @gadfly361! That must be it!!
It seems to be a common problem. I wonder if shadowing atom
instead of using something like radom
causes more bugs than adds convenience.
Right, the problem is it seems like documentation invites you to just map it over atom
. I too was thinking of using r/atom
instead.
Can re-frame handler have side-effects ?
@lazy-lambda: yep, that's where they're all meant to live
@gadfly361: is it worth logging a warning if the user tries to do reagent things with an atom instead of a ratom?
Hmm I could see arguments for both sides. That's a good question for Dan (dont think he is on slack yet).
@curtosis @jeffmk @danielcompton I agree and never use :refer [atom] in a namespace. Actually, I never refer anything from any library bc I think it makes you squint when remembering where it's from (but that is more of a preference .. clarity > brevity)
@gadfly361: Same. I find a one- or two-char namespace alias works well for deobfuscation without adding too much clutter.