CUFP 2014 Tutorial DOM Events

Wiki ▸ [CUFP 2014 Tutorial](CUFP 2014 Tutorial) ▸ DOM Events

As elm-d3 is an interface to the DOM. In order to build useable font-end applications with it, it will be necessary to receive and handle DOM events. In order to do this in a way that maintains the separation of effects form the definition of the view, it'll be necessary to handle events in two phases:

1. Event handlers will transform low-level DOM events into high-level events in the application domain and insert them into an event stream; and
2. Code will fold over the event stream to create Signal of models that will then get pushed back down through the view to create a UI update.

A complete elm-d3 application (with application-specific parts omitted with an …) will look like this:

import D3(..)
import D3.Event(..)

data Event = …
data Model = …

events = Stream Event
events = stream ()

d3_view : Selection Model
d3_view = …

view : Model -> Element
view = render height width d3_view

controller : Stream Event -> Signal Model
controller = 
  let initialModel = … in
  folde transform initialModel

main : Signal Element
main = view <~ (controller events)

Additional Reading

• MVC in a Reactive World

Next: TodoMVC