Using style or a class name maybe? Is that hidden the attribute hidden on the div or something else?
For now I've created a helper <https://github.com/joakin/gimme-gif/blob/a6bf98da1f7f018a29456930a1886c9fa908bde3/src/Components/App.elm#L87-L91> for that specific case resulting <https://github.com/joakin/gimme-gif/blob/a6bf98da1f7f018a29456930a1886c9fa908bde3/src/Components/App.elm#L84> in a nice little dsl <https://github.com/joakin/gimme-gif/blob/a6bf98da1f7f018a29456930a1886c9fa908bde3/src/Components/App.elm#L76-L80> gif url = when url <| div [ class "Gif" ] [ input [ type' "text", readonly True, value url ] [] , img [ src url ] [] ] error err = when err <| div [ class "Error" ] [ text err ] On Monday, May 16, 2016 at 8:22:55 PM UTC+2, Fedor Nezhivoi wrote: > > One possible solution may be to hide element based on condition: > > view model = > div > [ class "App" ] > [ div [ class "Error", hidden (String.isEmpty model.error) ] [ text > model.error ] > , div [ class "Gif", hidden (String.isEmpty model.gif) ] > [ input [ type' "text", readonly True, value model.gif ] [] > , img [ src model.gif ] [] > ] > ] > > 2016-05-16 23:22 GMT+06:00 Joaquín Oltra <joaqui...@gmail.com > <javascript:>>: > >> Hi! >> >> I'm porting a simple React webapp to Elm, and there is a pattern for not >> rendering a component that I'm not sure how to do cleanly with elm. >> >> The pattern is: >> >> data ? <Component/> : null >> >> In a render method, like in here: >> https://github.com/joakin/gimme-gif/blob/415ff83611ab64ba10eb4f0cddccc12d1192815d/browser/ui/app.js#L13-L15 >> >> My translation to Elm has been doing something like: >> >> if String.isEmpty model.error then >> text "" >> else >> div [ class "Error" ] [ text model.error ] >> >> But it seems verbose and weird, so I figure there are probably better >> ways to accomplish the same. >> >> Any ideas? >> >> Here's some more code with the pattern a couple of times: >> >> view model = >> div >> [ class "App" ] >> [ -- Other nodes here... >> if String.isEmpty model.error then >> text "" >> else >> div [ class "Error" ] [ text model.error ] >> , if String.isEmpty model.gif then >> text "" >> else >> div [ class "Gif" ] >> [ input [ type' "text", readonly True, value model.gif ] [] >> , img [ src model.gif ] [] >> ] >> ] >> >> >> >> >> ps: I'm keeping the state of the Error, Gif, etc separate because they >> are independent, there may be none to show, just the error, no error but a >> gif, and maybe both error and a gif. >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Elm Discuss" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to elm-discuss...@googlegroups.com <javascript:>. >> For more options, visit https://groups.google.com/d/optout. >> > > > > -- > Best regards, > Fedor Nezhivoi. > -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
