Rendering DOM when event fires

[Kostiantyn Rybnikov]

Simple and stupid question. I have a reflex-based statically-rendered page from some stub data, now I want to make it a bit more alive by getting initial data from XHR request. I got as far as getting “Event MyData” that should work correctly (in theory), which is nice, I’m “almost there”. Now I have a problem rendering my DOM with data from this MyData. I see how you can render, say, text node by converting event into dynamic and using `dynText` to render it, but what would be an analogy for "elWith"?

Just to remind:

elWith :: (MonadWidget t m, Attributes m attrs) => String -> ElConfig attrs -> m a -> m a

What I'm looking for is probably:

dynElWith :: (MonadWidget t m, Attributes m attrs) => String -> Dynamic (ElConfig attrs) -> m a -> m a

Or maybe even:

dynElWith :: (MonadWidget t m, Attributes m attrs) => String -> Dynamic (ElConfig attrs) -> Dynamic (m a) -> m a

Thanks.

[Sean Leather]

Hi Kostiantyn,

On Mon, Mar 14, 2016 at 3:54 PM, Kostiantyn Rybnikov wrote:

Simple and stupid question. I have a reflex-based statically-rendered page from some stub data, now I want to make it a bit more alive by getting initial data from XHR request. I got as far as getting “Event MyData” that should work correctly (in theory), which is nice, I’m “almost there”. Now I have a problem rendering my DOM with data from this MyData. I see how you can render, say, text node by converting event into dynamic and using `dynText` to render it, but what would be an analogy for "elWith"?

If I understand correctly what you're asking, there are a number of ways. Here are some:

1. You could use dyn or widgetHold from Reflex.Dom.Widget.Basic.

2. You could generate different variations of the DOM and choose to display or hide variations using Dynamic CSS attributes.

Regards,

Sean

[Kostiantyn Rybnikov]

All right, answering my own question here. I did something like this:

    void (widgetHold (return ()) (fmap renderInner reportEv))

This reportEv is the event of input-data (reports), renderInner is something like `MonadWidget t m => Report -> m ()`, so widgetHold does everything I need, initially rendering empty DOM, and then rendering initial real DOM that I need when XHR is ready.

[Kostiantyn Rybnikov]

Hi Sean,

Thanks a lot. I used widgetHold for now indeed, worked perfectly. In future, when my app will get more complex, I'll definitely need things like dynamic CSS attributes as well.