Erik, I'm using this approach, it is very clean ! Cheers~~
*--* *Andrés Otárola Alvarado* Software Engineer Skype: andres.otarola.alvarado Cel Chile: (+56) 8 415 2618 Cel US: (+1) (650) 307 3844 2016-07-15 0:21 GMT-07:00 Wayne Choi <[email protected]>: > Thanks for posting this! > > > On Tuesday, July 12, 2016 at 9:28:18 PM UTC-7, 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. > -- 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.
