从Elm读取全局JavaScript变量

bet*_*eta 4 javascript elm

我目前正在Elm中构建一个Web应用程序的一个小组件.elm组件被编译为JavaScript文件,加载然后安装在DOM节点上.然后应该从中读取配置对象window.config.(这不是我可以改变的.)

我怎样才能读取一个字符串,window.config.title以便在我的Elm组件中使用?我看过端口,但它似乎要求我修改生成的JavaScript或包装它周围的东西.这是唯一的选择吗?如果是这样,我怎么才能简单地读取变量的值?

Cha*_*ert 12

编辑:更新为榆木0.19

如果您的配置在应用程序的生命周期内没有变化,则可能最好使用Browser.elementPlatform.worker.

这允许您的main函数在初始化期间从Javascript接受单个值.该单个值可以是一个简单的javascript对象,也可以包含嵌套属性.重要的是在Elm中定义它的形状.

假设您的javascript配置如下所示:

<script>
  window.options = {
    foo: 123,
    nested: { bar: "abc" }
  };
</script>
Run Code Online (Sandbox Code Playgroud)

为了能够将其传递到您的Elm文件,您可以定义匹配的形状,如下所示:

type alias Flags =
  { foo : Int
  , nested : { bar : String }
  }
Run Code Online (Sandbox Code Playgroud)

现在你可以使用Browser.elementPlatform.worker在榆树文件中像这样,定义init该功能需要Flags作为参数:

import Html exposing (..)
import Browser
import String

main =
  Browser.element
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

init : Flags -> (Model, Cmd Msg)
init flags =
  ( { introText = String.concat
    [ "foo is "
    , String.fromInt flags.foo
    , " and nested.bar is "
    , flags.nested.bar
    ]
    },
    Cmd.none
  )
Run Code Online (Sandbox Code Playgroud)

最后一个难题是在初始化期间将您的Javascript配置选项传递给Elm.你的html和javascript看起来应该是这样的(相关部分window.options作为flags参数传递init()):

<body>
  <div id="myContainer"></div>
  <script src="Main.js"></script>
  <script>
    var app = Elm.Main.init( {
      node: document.getElementById("myContainer"),
      flags: window.options
    } );
  </script>
</body>
Run Code Online (Sandbox Code Playgroud)

这是一个关于ellie-app的工作示例.