On Wednesday, October 11, 2017 at 1:23:36 PM UTC-4, James Reeves wrote:
>
> If you output your HTML as DOM nodes, rather than a string, you can just
> attach the function directly to the attribute.
>
It just occurred to me that one advantage of the string approach is that
the initial page load is simply of one big wodge of HTML. I am no expert on
this stuff, but somewhere I saw a mention that this was optimal.
If I build individual DOM nodes so I can attach listeners, I then also have
to assemble them into the final structure.
Is that right? Will that be slower?
Thx!
>
> On 11 October 2017 at 18:20, hiskennyness <kent...@gmail.com <javascript:>
> > wrote:
>
>> I am cobbling together my own little CLJS web framework and it is going
>> well but I am stumped by one bit of interop: supporting event handlers that
>> close over lexical variables. It seems to be a piece of cake for, inter
>> alia, Reagent. Here is an excerpt from the "simple" example, hacked a bit
>> (the "xxx" bits) to make sure I was seeing what I was seeing:
>>
>> (defn color-input []
>> (let [xxx (atom 0)]
>> [:div.color-input
>> "Time color: "
>> [:input {:type "text"
>> :value @time-color
>> :on-change #(do (reset! xxx (rand-int 32767))
>> (println :xnow @xxx)
>> (reset! time-color (-> % .-target
>> .-value)))}]]))
>>
>>
>> My approach is to convert the anonymous function to a string via STR and
>> specify it in the generate HTML as the handler. Just to see my html I have
>> a little test code:
>>
>> (let [xxx (atom 42)]
>> (println :htm!!! (tag/to-html [(h1 {:onclick (on-evt #(swap! xxx inc))}
>> "Help!")])))
>>
>>
>> Here is `on-evt`:
>>
>> (defn on-evt [cbfn]
>> (cl-format nil
>> "(~a)(event)"
>> (str cbfn)))
>>
>>
>> Here is what I see in the console:
>> :htm!!! <h1 onclick='(function (){return
>> cljs.core.swap_BANG_.call(null,xxx_12780,cljs.core.inc);})(event)'
>> id='0'>Help!</h1>
>>
>> But JS understandably does not see the "xxx_12780".
>>
>> I have tried more than once digging into the reagent code to see how it
>> is working its magic but always run into a dead end.
>>
>> The one thing I do see when I inspect the DOM in the Chrome debugger is
>> that the handler is not there on the target element, just a react-id or
>> some such. This makes me think that the anonymous function itself (happily
>> compiled into JS closed over the lexical variable) is being stashed in a
>> dictionary under the react-id and that a handler at the document level is
>> navigating from the event target to the closure via the react-id.
>>
>> That's just crazy enough to work. :) But am I just missing some simple
>> CLJS interop capability? Any other ideas?
>>
>>
>>
>>
>>
>>
>>
>> --
>> You received this message because you are subscribed to the Google
>> Groups "Clojure" group.
>> To post to this group, send email to clo...@googlegroups.com
>> <javascript:>
>> Note that posts from new members are moderated - please be patient with
>> your first post.
>> To unsubscribe from this group, send email to
>> clojure+u...@googlegroups.com <javascript:>
>> For more options, visit this group at
>> http://groups.google.com/group/clojure?hl=en
>> ---
>> You received this message because you are subscribed to the Google Groups
>> "Clojure" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to clojure+u...@googlegroups.com <javascript:>.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
>
> --
> James Reeves
> booleanknot.com
>
--
You received this message because you are subscribed to the Google
Groups "Clojure" group.
To post to this group, send email to clojure@googlegroups.com
Note that posts from new members are moderated - please be patient with your
first post.
To unsubscribe from this group, send email to
clojure+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/clojure?hl=en
---
You received this message because you are subscribed to the Google Groups
"Clojure" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to clojure+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
