"DOM did match" - "DOM did *not* match"
On Sat, Jan 18, 2014 at 9:41 AM, David Nolen <dnolen.li...@gmail.com> 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 <samaa...@gmail.com> 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 <samaa...@gmail.com> wrote:
>>
>> > Hi David,
>> >
>> > thanks for your help.
>> >
>> > On 18 Jan 2014, at 01:47, David Nolen <dnolen.li...@gmail.com> 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 clojurescript+unsubscr...@googlegroups.com.
>> To post to this group, send email to clojurescript@googlegroups.com.
>> 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 clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at http://groups.google.com/group/clojurescript.
