Version using Elm Architecture

Button.elm

import Html exposing (Html)
import Html.Events
import Signal exposing (Address, Signal)
 

-- Button Component --
 
type ButtonAction 
  = Click
  | NoOpButton
  
type alias ButtonState = 
  { count : Int }
  
initButton : ButtonState
initButton = 
  { count = 0 }
  
viewButton : Address ButtonAction -> ButtonState -> Html
viewButton address {count} = 
  Html.button
      [ Html.Events.onClick address Click ]
      [ Html.text (toString count) ]
      

updateButton : ButtonAction -> ButtonState -> ButtonState
updateButton action state = 
  case action of 
    Click -> 
      { state | count <- state.count + 1 }
      
    NoOpButton ->
      state
    
    
   
   
-- Application --

type ApplicationAction 
  = ButtonA ButtonAction
  | ButtonB ButtonAction
  | NoOpApplication
  
  
type alias ApplicationState = 
  { buttonA : ButtonState
  , buttonB : ButtonState
  }
  
initApplication = 
  { buttonA = initButton
  , buttonB = initButton
  }
  
viewApplication : Address ApplicationAction -> ApplicationState -> Html
viewApplication address {buttonA, buttonB} = 
  let 
      addressA = 
        Signal.forwardTo address ButtonA
        
      addressB = 
        Signal.forwardTo address ButtonB
        
  in 
      Html.div 
          []
          [ viewButton addressA buttonA
          , viewButton addressB buttonB
          ]
          

updateApplication : ApplicationAction -> ApplicationState -> ApplicationState
updateApplication action state = 
  case action of 
    ButtonA a ->
      { state | buttonA <- updateButton a state.buttonA }
      
    ButtonB b -> 
      { state | buttonB <- updateButton b state.buttonB }
      
    NoOpApplication -> 
      state
      
      
      
-- Main --

{address, signal} = Signal.mailbox NoOpApplication


main = 
  Signal.map (viewApplication address)
    (Signal.foldp updateApplication initApplication signal)