Skip to content

Instantly share code, notes, and snippets.

@chrisbuttery
Last active October 2, 2016 04:51
Show Gist options
  • Save chrisbuttery/44e3ad81f9d195d0cd557da7a45a0683 to your computer and use it in GitHub Desktop.
Save chrisbuttery/44e3ad81f9d195d0cd557da7a45a0683 to your computer and use it in GitHub Desktop.
// send a value to incoming port
var Elm = require('./Main.elm');
var root = document.getElementById('root');
var app = Elm.Main.embed(root);
var num = 0;
setInterval(function () {
num = num + 1
app.ports.tick.send(num)
},1000);
module Main exposing (..)
import Html exposing (Html, button, div, text)
import Html.App
import Widget
import Ports
-- MODEL
type alias AppModel =
{ widgetModel : Widget.Model
}
initialModel : AppModel
initialModel =
{ widgetModel = Widget.initialModel}
init : ( AppModel, Cmd Msg )
init =
( initialModel, Cmd.none )
-- MESSAGES
type Msg
= WidgetMsg Widget.Msg
-- VIEW
view : AppModel -> Html Msg
view model =
Html.div []
[
Html.App.map WidgetMsg (Widget.view model.widgetModel)
]
-- UPDATE
update : Msg -> AppModel -> ( AppModel, Cmd Msg )
update message model =
case message of
WidgetMsg subMsg ->
let
( updatedWidgetModel, widgetCmd ) =
Widget.update subMsg model.widgetModel
in
( { model | widgetModel = updatedWidgetModel }, Cmd.map WidgetMsg widgetCmd )
-- SUBSCRIPTIONS
-- Send the value of `Ports.tick` to Widget
--
subscriptions : AppModel -> Sub Msg
subscriptions model =
Ports.tick WidgetMsg
-- APP
main : Program Never
main =
Html.App.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
port module Ports exposing (..)
port tick : (Int -> msg) -> Sub msg
module Widget exposing (..)
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
-- MODEL
type alias Model =
{ count : Int
, tickValue : Int
}
initialModel : Model
initialModel =
{ count = 0
, tickValue = 0
}
-- MESSAGES
type Msg
= Increase
| Tick Int
-- VIEW
view : Model -> Html Msg
view model =
div []
[ div [] [ text ("Widget: " ++ (toString model.count)) ]
, button [ onClick Increase ] [ text "Click" ]
]
-- UPDATE
update : Msg -> Model -> ( Model, Cmd Msg )
update message model =
case message of
Increase ->
( { model | count = model.count + 1 }, Cmd.none )
Tick val ->
({model | tickValue = val}, Cmd.none)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment