Using Html.lazy with more than 3 arguments

Learn
1

I have been looking for ways to use Html.lazy with more than 3 arguments and came across a reddit thread where it was suggested to use a tuple to pass in those arguments. I added this to make my app and found out that it was actually rerendering the function. Here is a link to Ellie: https://ellie-app.com/5yTCWmCp5a1/2

I know this has been fixed in the 3.0.0-beta version of elm-html but does anybody know a way of doing this now?

1 Like
2

We tried to use the tuple technique as well, and only later did we find out that it was ineffectual. I think the only way to do this is to restructure your model to use nested record or some other type that will group together fields that may be passed in to view functions. Not a great solution, given that your model structure and your view functions should not be coupled together.

3

I wrote about a concept to use function composition allowing you to pass in an entire model to create a view model. Later, I wrote about how to use Html.Lazy with that concept. Maybe that’s of use to you.

4 Likes
4

Thank you @charliek, I’ll check it out.

5

The challenge is that Html.Lazy uses referential equality and hence fails entirely if you construct any of its parameters during the view call because those constructed parameters will not be referentially equal to parameters you constructed the last time.

We’ve got native code that does referentially transparent and functionally pure deduping which helps, but it’s native code and sharing that is discouraged here. It also comes with the tricky part that you need to have a separate deduper for each path you care about for it to be effective. I generally stick it in the model.

Without resorting to native code, what you can do if some of your parameters come from a small space of values —e.g., you need a Boolean parameter — is build module-level functions that prebind those values and then choose amongst those functions in the render. This way, you get the number of arguments that you need to pass to Html.Lazy down.

Mark

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.