Multiple Counters on the Same Page 😮

[nelsonic]

It occurred to me while applying the Elm Architecture to my little "side project": https://github.com/nelsonic/time-mvp/issues/33 That there's a "gap" in this tutorial, namely: how do we have a more "complex" model (all the examples in the tutorial, currently have model as an int)

I propose that we: write an "exercise for the reader" to: a) refactor the model in the "reset counter" example to use an Object e.g: var model = { counters:[0] } where the value of the first element in the model.counters Array is the value for the single counter example. b) using the var model = { counters:[0] } approach, display multiple counters on the same page. c) write tests for the scenario where there are multiple counters on the same page.

[nelsonic]

As soon as you attempt to change the model everything will "break":

This is understandable! it's like trying to put a different/new fuel in your old car! it's won't run!

[nelsonic]

Showing multiple counters:

[nelsonic]

multiple instances:

[nelsonic]

Multiple counters using the same App: