ElmPortsExample.elm

module PortsExample where

import Html exposing (div, button, text)
import Html.Events exposing (onClick)
import Signal exposing (Mailbox, mailbox, send)
import StartApp
import Effects

type alias Model = String

init : (Model, Effects.Effects a)
init = ("initial string", Effects.none)


type Action 
    = SetURL String 
    | ResetURL


view : Signal.Address Action -> Model -> Html.Html
view address model =
  div []
    [ div [] [ text model ]
    , button [ onClick address (SetURL "Hello from the Elm button") ] [ text "SET" ]
    ]


update : Action -> Model -> (Model, Effects.Effects a)
update action model =
  case action of
    SetURL url ->
        (url, Effects.none)
    ResetURL -> 
        ("Reset", Effects.none)


port getURL : Signal (String)

setUrlFromJsSignal : Signal Action
setUrlFromJsSignal = Signal.map SetURL getURL


app =
  StartApp.start { init = init, view = view, update = update, inputs = [ setUrlFromJsSignal ]}

main = app.html

index.html

<!-- excerpt -->
<script>
      // get an empty <div>
      var div = document.getElementById('root');
      var button = document.getElementById('someButton');
     
      // embed our Elm program in that <div>
      var elmInstance = Elm.embed(Elm.PortsExample, div, {
						        getURL: 'URL not set'
						    });    

      button.onclick = function() {
      	elmInstance.ports.getURL.send("hi from JS");
      	event.preventDefault();
      }
    </script>