2016-06-22 17 views
2

現在、Elmにはウェブアプリケーションの小さなコンポーネントがあります。 elmコンポーネントはJavaScriptファイルにコンパイルされ、ロードされてからDOMノードにマウントされます。次に、window.configから設定オブジェクトを読み込む必要があります。 (これは私が変更できるものではありません)ElmからグローバルJavaScript変数を読み取る

どうすればいいですか?私のElmコンポーネントで使用する文字列をwindow.config.titleからお読みください。私はポートを見てきましたが、生成されたJavaScriptを変更したり、周囲の何かをラップする必要があります。それは唯一の選択肢ですか?もしそうなら、単に変数の値をどのように読み取るのですか?

+3

アプリの生涯にわたる設定変更を行います。あなたのHTMLとJavaScriptは、この(関連部分はembed()の2番目のパラメータとしてwindow.optionsを渡すことである)ようになっているはず?もしそうでなければ、あなたは[Html.programWithFlags](http://package.elm-lang.org/packages/elm-lang/html/1.0.0/Html-html-html)でelmコンポーネントを初期化するときに値を渡すことをお勧めします。 App#programWithFlags) –

+0

これはありません。それはおそらく私が望むものです。私は明日それで遊びます。ありがとう! – beta

答えて

9

編集:は、あなたの設定アプリの寿命にわたって変化しない場合、あなたはおそらく最高Html.App.programWithFlagsを使用して提供されますエルム0.18に

を更新しました。

これにより、初期化中にmain関数がJavascriptから単一の値を受け入れることができます。その単一の値は単純なjavascriptオブジェクトでも、ネストされたプロパティを含むことさえできます。重要なことは、エルムの内部でその形状を定義することです。

のは、JavaScriptの設定が次のようになりましょう:今すぐ

type alias Flags = 
    { foo : Int 
    , nested : { bar : String } 
    } 

:あなたのエルムファイルにそれを渡すことができるようにするために

<script> 
    window.options = { 
    foo: 123, 
    nested: { bar: "abc" } 
    }; 
</script> 

、あなたがこのようなマッチング形状を定義することができますこのようにElmファイルにprogramWithFlagsを使用して、Flagsを引数として持つinit関数を定義することができます。

import Html exposing (..) 
import Platform.Cmd exposing (..) 
import String 

main = 
    programWithFlags 
    { init = init 
    , view = view 
    , update = update 
    , subscriptions = subscriptions 
    } 

init : Flags -> (Model, Cmd Msg) 
init flags = 
    { introText = String.concat 
    [ "foo is " 
    , toString flags.foo 
    , " and nested.bar is " 
    , flags.nested.bar 
    ] 
    } ! [] 

パズルの最後の部分は、初期化中にJavascript設定オプションをElmに渡すことです。

<body> 
    <div id="myContainer"></div> 
    <script src="Main.js"></script> 
    <script> 
    var myContainer = document.getElementById("myContainer"); 
    var app = Elm.Main.embed(myContainer, window.options); 
    </script> 
</body> 

Here is a working example on ellie-app.

+0

これは、Elm v0.17でこれを行う方法の徹底的かつ非常に読みやすい例です(以前は同じ目標を達成するさまざまな方法がありましたが、静的な方法はv0.17で削除されました)。この回答はElmの公式文書に含まれていなければなりません。しかし、Elmは若い言語であり、バージョン間で頻繁に変更が発生することに注意してください。 –

関連する問題