Fork me on GitHub
#reagent
<
2015-08-04
>
pupeno10:08:39

Can a component have more than one top level html element?

mikethompson10:08:37

@pupeno: A component renderer has to return valid hiccup.

(defn wrong-component
   [name]              
   [[:div "Hello"] [:div name]])     ;; a vec of 2 [:div] 
The above isn't valid Hiccup and you'll get a slightly baffling error. You'll have to correct this mistake by wrapping the two siblings in a parent [:div] see below:
(defn right-component
   [name]              
   [:div 
     [:div "Hello"] 
     [:div name]])     ;; [:div] containing two nested [:divs]

pupeno10:08:34

@mikethompson: isn’t it possible in Hiccup to return a list of vectors for that?

pupeno10:08:19

I remember finding a way because I didn’t want to have to add a div every time I had an if-expression. But I don’t remember exactly what the solution was, I think it was lists.

ulsa11:08:21

I have another weird issue with calling BootstrapValidator from Reagent. This time I want to have the option to retrieve values from the server and "fill them in" from the side, which should trigger revalidation. I use property :value (:myfield @state), and that displays the value in the input field when I set the ratom value. However, I can't get validation to trigger unless I also use jQuery to set the value.

antishok14:08:45

@ulsa: i believe the reason is that reagent does its' renders asynchronously, so when the validation code runs the inputs are still empty

antishok14:08:45

ideally the validation solution would be working with the model data, not the live DOM

antishok14:08:21

not sure of an easy fix for you

antishok14:08:12

well a setTimeout would be easy but hardly pretty

gadfly36115:08:47

@pupeno having one top level html element is a restriction of react

michaelr16:08:39

i'm using jqueryui to implement sortable connected lists and it's giving me trouble by duplicating some items in the dom even though I cancel the sort/drop operation before it's complete and update the state instead...

michaelr16:08:08

i wonder whether i should "force update" of the whole sorted list/s in this case?

michaelr16:08:27

or maybe anyone here has tackled this problem before and knows how to deal with it?

michaelr16:08:29

gadfly361: btw, thanks for the cookbook example! i used it as a starting point..

gadfly36116:08:53

Np! Let me know if you get your issue resolved :) Do you have a gist?

ulsa16:08:11

@antishok: my current workaround is to set the ratom and also the element; it's ugly, but seems to work.

michaelr18:08:08

gadfly361: no gist atm..