This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-05-18
Channels
- # admin-announcements (7)
- # arachne (24)
- # beginners (40)
- # boot (24)
- # braid-chat (22)
- # cider (8)
- # cljsrn (35)
- # clojure (32)
- # clojure-austin (1)
- # clojure-belgium (52)
- # clojure-russia (16)
- # clojure-sanfrancisco (1)
- # clojure-taiwan (2)
- # clojure-uk (25)
- # clojurescript (112)
- # core-async (3)
- # cursive (18)
- # data-science (1)
- # datascript (7)
- # datomic (30)
- # devcards (2)
- # dirac (12)
- # emacs (4)
- # flambo (1)
- # funcool (5)
- # hoplon (146)
- # jobs (9)
- # jvm (5)
- # off-topic (4)
- # om (141)
- # onyx (22)
- # re-frame (89)
- # reagent (86)
- # ring-swagger (31)
- # rum (3)
- # spacemacs (1)
- # specter (10)
- # untangled (112)
- # yada (3)
@savelichalex: whatever is changing @page-data should dispatch an event to scroll to top
I’m trying to implement a with-class
fn that will take a component and add a class to it
with simple hiccup it’s as trivial as using update
, but how about form-2
component (returning an inner render fn)?
e.g:
(def app-state (reagent/atom 2))
(defn form2comp
[]
(swap! app-state + 5)
(fn []
[:div
[:h2 @app-state]
[:button {:on-click #(swap! app-state inc)}
"Click!"]]))
now, I want to be able to call [with-class “some-class” form2comp]
to render the same component with some-class
html class added to the outer div
I’m not sure but something like
(defn with-class [class form2comp]
(let [f2c (form2comp)]
(fn [] (update f2c …))))
might do it.not sure about that and how to pass args to form2comp
etc.
how about
(defn with-class [class form2comp]
(fn f2-outer* [& outer-props]
(let [f2c (apply form2comp outer-props)]
(fn f2-inner* [& inner-props]
(update
(apply f2c inner-props)
...)))))
@mccraigmccraig: I'm not familiar with fn*
, could you point me to place where I can learn more?
@smogg: f2-outer*
and f2-inner*
are just names given to anonymous fns... it can help with debugging
do we have a clojurebot in here ? how do i hit it ?
@smogg: i've gotten into the happen of giving names to my anonymous fns 'cos they can be used with tracers like this - https://github.com/Day8/re-frame-tracer
@mccraigmccraig: your solution seems like the right one, thanks!
Has anyone noticed that the life cycle functions will-mount / did-mount get called all the time when really there should just be a re-render and not a re-mount?
@mattsfrey: can we see the code
basically the rf/dispatch sets off a rest call that re-populates abd/abs- which gets de-referenced in the sub component
so I would expect the sub component to re-render but it seems that update to abd/abs- is causing the entire component chain to remount as this code starts an infinite loop
@mattsfrey: shouldn't line 33 be in the function?
no I just want it to be called one time when the component mounts, not on re-renders
@mattsfrey: I see. Maybe you could try to explicilty put it in a didmount: metadata?
did-mount only runs once for me
are you perhaps re-initializing the component again from another render-fn
maybe some weird code structure somewhere?
do you know of a good way to debug this other than printing statements at each component’s render?
@mattsfrey: I thik it should be a function #(rf/dispatch [:abs/load-abs])
@mattsfrey: because I forgot the bracket {} , look at the gist again
@mattsfrey: sorry I probably forgot more parens- (closing parens) 😕
but I have another issue now - when I navigate away from the page that has this component and then return to it, it isn’t re-mounting it
@mattsfrey: kill , restart figwheel?
@mattsfrey I'm not familiar with reframe, what does dipatch() returns?
@mattsfrey: try to remove the '#'
removing the # seems to work, although now it is back to the original problem - continuously running in a loop
@mattsfrey: if #(println “DID-MOUNT”) never print then I don't know what's going on
its very hard to determine what is happening without a code reference 🙂
@lewix: Do you prefer the with-meta form for creating components? I find just using form-3 w/ create-class to just be more clear
I thought I read in the documentation that the 'with-meta' form is kind of unpreferred now as well
but I might of been dreaming
@sbmitchell: yes. I find it more succinct; I actually use the ^{} ; I don't follow just to follow - when I'll know why it's unpreferred maybe I'll change my mind. I'm new to the whole clojurescript/clojure world so I suspect it's unpreferred for some valid reason I'll soon be aware of
I think its kind of a hack to use with-meta or it looks that way but perhaps its not
I also dont know how it works with closures
reagent use with meta shorthand to set the unique keys and it seems to be the preferred method - it's quite inconsistent with reframe not preferring with meta if you ask me. I'm curious to know why
where does it says thats the preferred method?
the component creation docs were moved to re-frame
so its kind of odd 😛
@sbmitchell: the reagent doc use it in the examples and almost all examples I came across use the meta short hand to set the keys
interesting...
I would definitely like to know the implications of using one over the other
until then I use my preferred method 😉. I'm aware that it's the "preferred way" everybody say that but nobody say why
Yea it might just be a "react vs reagent" thing
create-class is just the react way and reagents with-meta is the reagent way
@sbmitchell: what's the most complex reframe app that you've seen out there
probably the one im working on 😛
though we are just incoporating re-frame now...we previously rolled out own
@sbmitchell: can I see
so based on looking at the source code the process for component creation of the forms is normalized here
https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/component.cljs#L294
so it looks like there really is no difference its just that the with-meta version makes reagent do some extra stuff in generating the structure
it doesnt need to run the create-class stuff if you just use r/create-class lol
reagent/create-class*
@sbmitchell: why have that normalizing function at all if the intent is not to use it preferably
Hey guys, I’m using reagent to modify :style
of a component. Specifically the background
property. But I want to have multiple background
properties e.g.
background: red; background: -webkit-radial-gradient(circle, red, white, orange);
but I can’t use the :background
key more than once because it will get overwritten in the style
properties map
@ccann: I'd check out garden https://github.com/noprompt/garden/blob/master/README.md