Coupling view and style is not the problem, it's the *goal*. Right now, you can't declare CSS in the place where you use it: you need to create a separate stylesheet with references, use those references in your view and then put the stylesheet somewhere. This is not how we write all the rest of our code. Imagine if every time you declare a function, you also had to put manually that function in a "list of all functions" and then add a step in your build pipeline to insert that list in your bundle just so that you can execute it. This is what we currently do with CSS, and results in many of the problems that we have with it.
In private, Peter Damoc kindly suggested that my best shot would be the view-stored-inside-the-model approach. Absent any better suggestion, I will pursue that. On Tuesday, June 6, 2017 at 4:47:44 PM UTC+10, Peter Damoc wrote: > > It seams that you have driven yourself into a corner because of a series > of choices that you made with your code architecture. > > The best way forward is to refactor you code so that you decouple the > style from the view. > You should be able to get both of them from the model independently. > > Once you've done that, you will just need to call the style function with > the new model in `update` and push the output through the port. > On the other side of the port you might want to experiment with a check > against a saved value as to not trigger needless parsing of the mounted > CSS. > > > > > > On Mon, Jun 5, 2017 at 1:46 PM, Francesco Orsenigo <[email protected] > <javascript:>> wrote: > >> I am experimenting with view functions that produce both html content and >> the style that should be applied to that markup, as in >> >> myView : Model -> ( Html msg, List CssRule ) >> >> So far, I have been rendering the above by creating a <style> tag inside >> the <body>: this works great but it is not compliant, so I want to find a >> way to insert the styling in the <head>. >> >> I can do this with a port, but where do I execute it? >> >> One solution would be to execute myView inside the program's update >> cycle, store the resulting Html in the model, and have a dummy program >> view function that just produces the pre-rendered html content stored in >> the model, but seems a really weird thing to do and I don't know how it >> would impact performance. >> >> update msg model = >> let >> ... >> >> ( html, style ) = myView model >> in >> ( { model | renderedView = html }, portUpdateHeaderStyle style ) >> >> view model = >> model.renderedView >> >> >> The other solution would be to render everything twice, once in the >> program's view to get the html content, and another inside the update cycle >> to get the style and execute the port, but executing myView twice >> doesn't seem great for performance. >> >> Is there a better way? >> >> -- >> 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 [email protected] <javascript:>. >> For more options, visit https://groups.google.com/d/optout. >> > > > > -- > There is NO FATE, we are the creators. > blog: http://damoc.ro/ > -- 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 [email protected]. For more options, visit https://groups.google.com/d/optout.
