2016-08-24 3 views
1

私には、チャートを含むページを持つElm SPAがあります。 JSポートを使用してchart.jsグラフをアクティブにしています。ページが読み込まれると、ポート経由でチャートデータを送信したいと思います。私はイベント(たとえば選択した変更のような)でコマンドをうまくワイヤリングできますが、ページがロードされたときにコマンドを起動する方法を失うことになります。Elmでは、一度ページが転送されると、どのようにCmdを起動できますか?

私のアプリケーションのinitでコマンドを配線しようとしましたが、もちろん、私は自分のアプリケーションデータを取得する前にこのコードを実行します。

ありがとうございます!

いくつかのサンプルコード:(。私のモデルに基づいたデータをグラフ化、それに沿って取る私のポートの名前であると私は、「チャート」とCmdを作成しています)

Main.elm

init : Result String Route -> (Model, Cmd Msg) 
init result = 
    let 
     currentRoute = 
      Routing.routeFromResult result 
    in 
     (initialModel currentRoute, Cmd.map VendorsMsg fetchAll) 


subscriptions : Model -> Sub Msg 
subscriptions model = 
    Sub.none 


urlUpdate : Result String Route -> Model -> (Model, Cmd Msg) 
urlUpdate result model = 
    let 
     currentRoute = 
      Routing.routeFromResult result 
    in 
     ({ model | route = currentRoute }, chart (computeChartData model)) 


main : Program Never 
main = 
    Navigation.program Routing.parser 
     { init = init 
     , view = view 
     , update = update 
     , urlUpdate = urlUpdate 
     , subscriptions = subscriptions 
     } 

Routing.elm

type Route 
    = HomeRoute 
    | AdminRoute 
    | EditVendorRoute VendorId 
    | NotFoundRoute 


matchers : Parser (Route -> a) a 
matchers = 
    oneOf 
     [ format HomeRoute (s "") 
     , format EditVendorRoute (s "admin" </> int) 
     , format AdminRoute (s "admin") 
     ] 


hashParser : Navigation.Location -> Result String Route 
hashParser location = 
    location.hash 
     |> String.dropLeft 1 
     |> parse identity matchers 


parser : Navigation.Parser (Result String Route) 
parser = 
    Navigation.makeParser hashParser 


routeFromResult : Result String Route -> Route 
routeFromResult result = 
    case result of 
     Ok route -> 
      route 

     Err string -> 
      NotFoundRoute 
+1

['elm-lang/navigation'](http://package.elm-lang.org/packages/elm-lang/navigation/latest)を使用していますか?もしそうなら、 'urlUpdate'であなたのポートに通知する' Cmd'を返せませんでしたか? –

+0

私はelm-lang/navigationを使用しています。私はそれを把握することができます私に見てみましょう! – Gabe

+0

Brilliant - アプリ内の別のページからページに移動したときに機能するようになりました。ロケーションバーにURLを入力すると、ロードされません(myapp.com/#chartなど)。どのようにそれを動作させるためにどのようなアイデアですか?ありがとうございました! – Gabe

答えて

2

あなたの初期モデルを考えると、init機能中にchartポートを発射することができるはずです:

init : Result String Route -> (Model, Cmd Msg) 
init result = 
    let 
     currentRoute = 
      Routing.routeFromResult result 
     model = 
      initialModel currentRoute 
    in 
     (model, Cmd.batch [ Cmd.map VendorsMsg fetchAll, chart (computeChartData model) ]) 

これは、ポートを手動でブラウザにURLを入力しても解雇されていることを確認する必要があります。

0

ページロード時にフラグを使用してプログラムに初期データを渡すことができます。したがって、ページがロードされたときに初期データが必要であると心配している場合は、それをelmコードに渡すだけです。

関連する問題