Thank you so much. Your post saved my day. Cheers.
On Wednesday, July 13, 2016 at 2:28:18 PM UTC+10, Erik Lott wrote:
>
> As a quick note to anyone struggling with how to perform app wide
> inter-component communication in elm 0.17 (e.g. anyone building a
> non-trivial SPA), here is one simple way to setup pubsub style
> communication using Elm Ports and Subscriptions.
>
> In this example, ChildOne will broadcast a message that ChildTwo is
> listening for.
>
> Ports.elm
> *port* module Ports exposing (..)
>
> -- dispatchSomeMessage will create a command with a
> -- string payload representing an important message
> -- to broadcast to listening components.
>
> port *dispatchSomeMessage* : String -> Cmd msg
>
>
> -- receiveSomeMessage is the port which our components
> -- subscribe to receive the dispatched message
>
> port *receiveSomeMessage* : (String -> msg) -> Sub msg
>
>
> The Ports.elm file contains all of the port specifications in the app. In
> this case it defines a two ports: one port for dispatching a message, and
> another for receiving a message. The module declaration at the top of the
> file must be preceded by "port".
>
> index.js
> var app = Elm.Main.fullscreen();
>
> app.ports.*dispatchSomeMessage*.subscribe(function(msg) {
> app.ports.*receiveSomeMessage*.send(msg);
> });
>
> This is where the behaviour of all ports are defined in javascript. In
> this case the dispatchSomeMessage function is receiving a msg argument from
> Elm, and then quickly sending that message back into Elm through the
> receiveSomeMessage port.
>
> ChildOne.elm
> module ChildOne exposing (..)
>
> import Ports exposing (..)
> import Html exposing (Html, button, text)
> import Html.Events exposing (onClick)
>
>
> type alias Model = String
>
>
> type Msg
> = Click
>
> subscriptions : Model -> Sub Msg
> subscriptions model =
> Sub.none
>
> update : Msg -> Model -> ( Model, Cmd Msg )
> update msg model =
> case msg of
> Click ->
> ( model, *dispatchSomeMessage "Hello World!"* )
>
>
> view : Model -> Html Msg
> view model =
> button [ onClick Click ] [text "Click Me"]
>
>
> ChildOne dispatches the message "Hello World!" through the
> dispatchSomeMessage port when a button in the view is clicked. The message
> is then routed from the dispatchSomeMessage port, directly back into the
> receiveSomeMessage port as defined in index.js
>
> ChildTwo.elm
> module ChildTwo exposing (..)
>
> import Ports exposing (..)
> import Html exposing (Html, text)
>
> type alias Model =
> { message : String }
>
> type Msg
> = ChangeMessage String
>
> subscriptions : Model -> Sub Msg
> subscriptions model =
> *receiveSomeMessage **ChangeMessage*
>
>
> update : Msg -> Model -> ( Model, Cmd Msg )
> update msg model =
> case msg of
> ChangeMessage msg ->
> ({ model | message = msg }, Cmd.none )
>
>
> view : Model -> Html Msg
> view model =
> text model.message
>
> ChildTwo subscribes a ChangeMessage tag to the 'receiveSomeMessage' port.
> When the port receives the "Hello World" message from ChildOne, ChildTwo
> updates its models message, and re-renders the view.
>
> Main.elm
> module Main exposing (..)
>
> import ChildOne
> import ChildTwo
>
> type alias Model =
> { childOneModel : ChildOne.model
> , childTwoModel : ChildTwo.model
> }
>
> -- ..init func. nothing special here.
>
> type Msg
> = ChildOneMsg ChildOne.Msg
> | ChildTwoMsg ChildTwo.Msg
>
>
> subscriptions : Model -> Sub Msg
> subscriptions model =
> * Sub.batch*
> * [ Sub.map ChildOneMsg (ChildOne.subscriptions
> model. childOneModel)*
> * , Sub.map ChildTwoMsg (ChildTwo.subscriptions
> model. childTwoModel)*
> * ]*
>
> -- .. update function. nothing special here.
>
> main : Program Never
> main =
> Html.App.program
> { init = init
> , update = update
> , view = view
> , subscriptions = subscriptions
> }
>
>
>
> Main.elm batches the subscriptions defined in child components. That's all
> there is to it. Nice and clean inter-component communication.
>
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
