"DOM did match" - "DOM did *not* match"
On Sat, Jan 18, 2014 at 9:41 AM, David Nolen <[email protected]> wrote: > OK, I looked into this. First I was wrong about apply, I was a bit tired > when I wrote that, apply works fine in this instance because the dom macros > are also functions. > > Second, the reason your code doesn't work is because you can't put "div" > tags in "p" tags. If you switch to the surround "p" tag to a "div" it will > work just fine. I figured this out by looking at Chrome Elements Inspectors > and saw that the DOM did match what was actually written. This is not an Om > bug or a React bug, you just have to know that browsers do not like this > and the DOM will be different from what React expects. > > David > > > On Sat, Jan 18, 2014 at 9:01 AM, Samuel Aaron <[email protected]> wrote: > >> Digging into this a little further... >> >> it seems that calling functions from the props is ok. If I re-impement >> subdiv-color as follows: >> >> (defn subdiv-color [] >> "red") >> >> and call it from my render-subdiv fn as follows: >> >> (defn render-subdiv [content] (dom/div #js{:style #js{:color >> (subdiv-color)}} content)) >> >> then it totally works (i.e. all the divs have a "red" colour). >> >> However, if I revert back to the original implementation in my example: >> >> (defn subdiv-color [] (rand-nth ["black" "green" "blue" "red"])) >> >> Then I get the behaviour previously described: it renders first time and >> then fails the second rendering. It is possibly because the props are used >> as part of a key for react components and therefore shouldn't be changed? >> >> How might I give each div a random background colour? >> >> Sam >> >> --- >> http://sam.aaron.name >> >> On 18 Jan 2014, at 07:49, Samuel Aaron <[email protected]> wrote: >> >> > Hi David, >> > >> > thanks for your help. >> > >> > On 18 Jan 2014, at 01:47, David Nolen <[email protected]> wrote: >> > >> >> (apply dom/p nil >> >> (map render-subdiv (:subdivs data))) >> >> >> >> Is not going to work. You need to put the result of map into a >> JavaScript array. React doesn't know anything about ClojureScript sequences >> and I don't expect it to for some time and I don't intend to magically >> making that work in Om in the near term. >> > >> > Unfortunately, if I change the fn main-div to the following: >> > >> > (defn main-div [data owner] >> > (om/component >> > (dom/div nil >> > (dom/h1 nil (:title data)) >> > (dom/p nil >> > (into-array (map render-subdiv (:subdivs data))))))) >> > >> > Then I still see the same error - i.e. it renders correctly initially, >> then the timer triggers the exception described previously. >> > >> > The mistake I was making before was treating the dom/* macros as >> functions - which was why I was trying to apply them to a Clojure sequence. >> I hadn't looked closely enough at the bottom of the dom ns where >> gen-react-dom-inline-fn generates a macro for the specified tag and the >> function-producing gen-react-dom-fn isn't ever called. >> > >> > I must therefore clearly be doing something else wrong. The strange >> thing to me is that it does work for the first render - it just can't >> handle the state being modified. >> > >> > Sam >> > >> > --- >> > http://sam.aaron.name >> > >> > >> > >> >> -- >> Note that posts from new members are moderated - please be patient with >> your first post. >> --- >> You received this message because you are subscribed to the Google Groups >> "ClojureScript" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected]. >> To post to this group, send email to [email protected]. >> Visit this group at http://groups.google.com/group/clojurescript. >> > > -- Note that posts from new members are moderated - please be patient with your first post. --- You received this message because you are subscribed to the Google Groups "ClojureScript" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/clojurescript.
