hoplon 2020-06-19

That worked for one element! I now stumbled across a different problem with a collection inside a collection. I read all the wiki and i am stumped. I have (defc app-state {:components [{:id "b1" :caption "blah"} {:id "b2" }]}) And (defelem cbutton [att c] (div :id (:id att) (text (:caption att))) I tried both doing loop-tpl [c app-state] and loop-tpl [c (:components app-state)] as well as two loop-tpl: (Loop-tpl [c1 app-state] (Loop-tpl [c2 c1] ... And none of these approaches worked. I'm essentially trying to create a cbutton for each element in :components and then, when I update components I want the button to be updated. For example if I change the caption or if I remove the button from the collection, I want the UI to be updated. Thank you so much and apologies if this is really obvious, I read all the docs and tried multiple ways.

If you think this is the wrong way to model the app state I'm glad to listen to any feedback.

@geo.ciobanu you probably want to break the state into much smaller bits and then wire those small bits into a larger bit (if needed)

also loop/for-tpl on a map needs destructuring

you really dont want a large global app state

for many reasons

mostly because a large state with many things watching it will have negative performance impacts on the graph

where small independent bits will have a more localized effect on your application

Thank you @flyboarder. I can break it up into subcategories but the components collection for example will have elements added and removed as the user adds/removes items from the GUI.

yeah so I would keep that as a vector in it’s own state

basically a list of components (defc components [])

that will also make your for-tpl or loop-tpl easier

And thanks for the destructuring tip, I can't believe I missed that

also you dont want to nest -tpl blocks

since they return formula cells, you need an element in between them