How to handle elm mdl indexes in a big single page application?

Question

This is an example from elm-mdl

Button.render Mdl [0] model.mdl
  [ Button.raised
  , Button.ripple
  , Button.onClick PollMsg
  ]
  [ text "Fetch new"]

Index here is [0]. I assume if I am building a single page application I can put indexes like ["page0", 0]. Is that right?

But does that mean that all the mdl data for all the buttons in the application is in memory? How is it working?

Answer 1

elm-mdl uses these identifiers for its internal handling. In particular, these ids are the reason you can get away with such simple calls to update and view.

As @pierrebeitz already explained, these integers reside in the application memory, but that's not a problem (even if you had hundreds of buttons).

As for working with elm-mdl in larger contexts, you have at least these two options available:

1. Use a number-combination like [0, 0], [0, 1] and so on. This is particularly useful, if you generate multiple similar elm-mdl components (f.ex. radio buttons or such) in a loop. In your code, the first index may be hard-coded, but the second integers stem from the looping.

2. For the overall picture you need to keep in mind, that these integers are local to your actual elm-mdl Model instance. In other words, creating a separate Model allows you to re-use these integers. This means you can use TEA components where a component has its own model, including an elm-mdl Model. As each component has free reign over the identifiers it uses, you have an easier time not to mess them up.

All that being said, I consider these indexes the worst part of elm-mdl. I would really appreciate if they could get rid of them (without overly complicating the resulting code of course), but for the time being I consider them the price tag for an otherwise awesome material design library.