I’m confused about when / where to write code to trigger js when an element is created. For example, attaching Bootstrap tooltips to elements created by a Hoplon defelem. Is there a pattern for this? It’s probably really simple and I’m just not seeing it.

I need the element to exist before I run the Bootstrarp .tooltip() fn, but I’m not sure where to run it. It definitely doesn’t work inside the defelem?

I’m wondering if there’s a way to trigger js to run after an element is loaded.

Maybe the right question to ask is, should I use when-dom for this?

Oh, I didn’t realize I could call jQuery methods on elements before they are added to the dom. That makes sense. 🙂

@mudphone seems like you worked it out

it's pretty common to be able to work with elements while they are detached

but if not, when-dom is totally fine too

@thedavidmeister thank you, that’s really cool. I like it. Manipulating the elements before attaching to the DOM makes so much sense.

I don’t think I really understand how to use when-dom… (and on!, and do!) yet… is there a good way to learn more about that? I’ve read the guides.

with-let is really handy for this

(j/with-let [el (div "foo")]
 (.doSomething el))

is like

(let [el (div "foo")]
  (.doSomething el)
  el)

so hoplon functions return dom elements detached from the document

but i think that the html and body functions are special

so when regular elements go into the html hoplon puts it in the document

i think

also (doto ..) works if you’re only mutating the same element and it comes as the first argument

(doto (div "foo") (.doSomething))

or maybe its in the page generation, actually i don't know exactly where it happens 😛

ok yes, my example could just be a doto

but with-let is still handy because you can do lots of stuff in there

yeah

it makes code more rhombusy

@mudphone so when-dom just executes when the detached element gets attached

@dm3 yeah you don't get dangling return values at the bottom of your big function

on! and do! just bind event handlers and update html attributes or trigger events respectively

hoplon automatically figures out which one you mean based on what you pass it

(h/div :focus true) will trigger focus on that div via do!

(h/div :focus #(prn "hi")) will respond to a focus event by prning "hi" via on!

(h/div :data-focus true) will set the data-focus html attribute via do!