Globale JavaScript-Variable aus Elm lesen

Ich baue gerade eine kleine Komponente einer Web-App in Elm. Die Elm-Komponente wird in eine JavaScript-Datei kompiliert, geladen und anschließend auf einem DOM-Knoten bereitgestellt. Es sollte dann ein Konfigurationsobjekt von window.config lesen. (Dies kann ich nicht ändern.)Globale JavaScript-Variable aus Elm lesen

Wie kann ich z.B. Lese eine Zeichenfolge von window.config.title in meiner Elm-Komponente zu verwenden? Ich habe Ports angeschaut, aber es scheint, dass ich das generierte JavaScript modifizieren oder etwas um es herum wickeln muss. Ist das die einzige Option? Wenn ja, wie würde ich einfach den Wert einer Variablen lesen?

Quelle

2016-06-22 beta

Ist die Konfigurationsänderung über die gesamte Lebensdauer der App? Wenn nicht, würde ich empfehlen, die Werte bei der Initialisierung Ihrer Elm-Komponente mit [Html.programWithFlags] (http://package.elm-lang.org/packages/elm-lang/html/1.0.0/Html- App # programWithFlags) –

Tut es nicht. Das ist wahrscheinlich, was ich will. Ich werde morgen damit spielen. Vielen Dank! – beta

Edit: zu Elm

0.18 aktualisiert Wenn Ihre Konfiguration über die gesamte Lebensdauer Ihrer App nicht ändert, werden Sie wahrscheinlich unter Verwendung Html.App.programWithFlags am besten gedient werden.

Dadurch kann Ihre main-Funktion einen einzelnen Wert von Javascript während der Initialisierung akzeptieren. Dieser einzelne Wert kann ein einfaches JavaScript-Objekt sein oder sogar verschachtelte Eigenschaften enthalten. Das Wichtigste ist, seine Form in Elm zu definieren.

Lassen Sie uns sagen, dass Ihre Javascript-Konfiguration wie folgt aussieht:

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

Um das passieren in die Elm-Datei zu können, können Sie eine passende Form wie folgt definieren:

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

Jetzt Sie können programWithFlags in Ihrer Elm-Datei wie folgt verwenden und definieren eine init-Funktion, die Flags als Argument verwendet:

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 
    ] 
    } ! []

Das letzte Puzzleteil besteht darin, Ihre Javascript-Konfigurationsoption während der Initialisierung an Elm zu übergeben. Ihre HTML und JavaScript sollte etwas so aussehen (der relevante Teil in ist window.options als zweiter Parameter von embed() vorbei):

<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.

Quelle

2016-06-23 09:43:08

Dies ist ein gründliches und sehr gut lesbares Beispiel dafür, wie man dies in Elm v0.17 macht (es gab verschiedene Wege, um dasselbe Ziel zu erreichen, aber diese statischen Wege wurden in v0.17 entfernt). Diese Antwort sollte in der offiziellen Elm-Dokumentation enthalten sein. Beachten Sie jedoch, dass Elm eine junge Sprache ist und häufig wechselnde Änderungen zwischen den Versionen auftreten. –

Globale JavaScript-Variable aus Elm lesen

Antwort

Verwandte Themen