local state example with reagent

[wilkerlucio]

Hi,

I'm struggling here trying to find out how to have local state using reagent, could you guys please provide an example on that?

Thanks.

[ckirkendall]

In reagent local state is much easier than in om. It can be represented just by an atom. Here is a simple example of a snippet with local state.

(defsnippet my-component* "path/..." [:my-inputs] [data local-atm] {[:input (do-> (set-attr :value @local-atm) (listen :on-change (fn [e](reset! local-atm %28str "-" %28.-value %28.-target e)))))})

(defn my-component [data](my-component* data %28atom)))

[wilkerlucio]

yeah, you are right, just a simple solution, I was trying to find a let around it, but yeah, your solution does the trick, thanks :)

[LiFlash]

Hi, @ckirkendall could you please give some more advise? I just tried to put some local state to a (defsnippet ...) via your (defn ...) 'delegation' example, but when the components are rendered, the state seems to have the initial value all the time. I want to have a selectable div. That is, a given snippet should be wrapped within a selectable div like this:

(defsnippet selectable* "path-to-template" [selector] [state view]
{[selector] (do->
                    (listen :on-click #(reset! state true))
                    (if @selected
                       (add-class "selected")
                       (remove-class "selected"))
                    (content view))})
(defn selectable [view]
   (selectable* (atom false) view))

In this example, the div never get's the class 'selected'. And there may be a bug, since i get an error like 're-find must match against a string' if the template doesn't already contain a 'class' property (because of remove-class, I think).

Thanks for your help!

[LiFlash]

I don't really understand what's happening, but I solved the problem by using brackets instead of a direct function call like this (taken from the example above):

(defn selectable [view]
  [selectable* (atom false) view])

Maybe you could add a description in the readme about how the components work in kioo. My current observations show that calling the snippets like (some-snippet ...) breaks the concept of independent components. That is, everything is re-initialized if the state changes. Using the bracket version shown above leads to the expected decoupling of the components. Even though react spits out lots of warnings about components being called directly instead of using a factory. Could you please give a short explanation about what is happening here? Thanks!

[ckirkendall]

Are you working with reagent or om.

On Sun, Feb 15, 2015 at 7:33 PM, LiFlash notifications@github.com wrote:

I don't really understand what's happening, but I solved the problem by using brackets instead of a direct function call like this (taken from the example above):

(defn selectable [view] [selectable* (atom false) view])

Maybe you could add a description about how the components work in kioo. My current observations show that calling the snippets like (some-snippet ...) breaks the concept of independent components. That is, everything is re-initialized if the state changes. Using the bracket version shown above leads to the expected decoupling of the components. Even though react spits out lots of warnings about components being called directly instead of using a factory. Could you please give a short explanation about what is happening here? Thanks!

— Reply to this email directly or view it on GitHub https://github.com/ckirkendall/kioo/issues/37#issuecomment-74446301.

[LiFlash]

Since this issue is for reagent, i'm using reagent ;)

[LiFlash]

Hi @ckirkendall,

I just created a repo to talk about things like this issue. I also recognized that I totally got the syntax of kioo wrong. One is supposed to use the brackets all the time. So in my first example above the fn

(defn selectable [view]
   (selectable* (atom false) view))

is definitely wrong and my second comment on using brackets is the right one. Further more the line (content view) is wrong too, since it must be (content [view])

Even though, both versions work in some way. Don't know if it's useful or necessary to mention that in the README. At least I, as a newby, didn't get that in the first place.

Nevertheless, back to my 'showcase' project. I created it here. It's based on the reagent-template. I only changed the versions of reagent and kioo to work properly (see #44). As described in the README it contains two lists, global state and local state. The lists are created with reagent-hiccup-style and kioo in the same way, but they behave differently. That is, the clicked releases in the kioo version are always re-initialized if the global state changes somewhere. In the reagent version they aren't. See the source code for details. Can you please have a look and give some suggestions about what I still get wrong here?

Thanks!