2016-06-22 4 views
2

В настоящее время я создаю небольшой компонент веб-приложения в Elm. Компонент elm скомпилирован в файл JavaScript, загруженный, а затем смонтированный на узле DOM. Затем он должен прочитать объект конфигурации от window.config. (Это не то, что я могу изменить.)Чтение глобальной переменной JavaScript из Elm

Как я могу, например. прочитайте строку с window.config.title для использования в моем компоненте Elm? Я посмотрел на порты, но мне кажется, что мне нужно модифицировать созданный JavaScript или обернуть что-то вокруг него. Это единственный вариант? Если да, то как бы просто прочитать значение переменной?

+3

ли изменение конфигурации в течение срока службы приложения? Если нет, я бы рекомендовал передать значения, когда вы инициализируете свой компонент вяза с помощью [Html.programWithFlags] (http://package.elm-lang.org/packages/elm-lang/html/1.0.0/Html- App # programWithFlags) –

+0

Это не так. Вероятно, это то, чего я хочу. Я буду играть с этим завтра. Благодаря! – beta

ответ

9

Edit: Обновлен Elm 0.18

Если конфигурация не меняется в течение всего срока службы вашего приложения, вы, вероятно, будет лучше всего с помощью Html.App.programWithFlags.

Это позволяет вашей функции main принимать одно значение из Javascript во время инициализации. Это единственное значение может быть простым javascript-объектом или даже содержать вложенные свойства. Важная вещь заключается в определении его формы внутри Вязов.

Допустим, что ваш Javascript конфигурация выглядит следующим образом:

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

Для того, чтобы быть в состоянии передать, что в файл Вязов, вы можете определить форму соответствия так:

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

сейчас вы можете использовать programWithFlags в вашем файле Elm следующим образом, определяя функцию init, которая принимает Flags в качестве аргумента:

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 во время инициализации. Ваш HTML и Javascript должен выглядеть следующим образом (соответствующая часть Попутно window.options в качестве второго параметра embed()):

<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 - это молодой язык, и между версиями часто происходят нарушения. –

Смежные вопросы