我目前正在Elm中构建一个Web应用程序的一个小组件。 elm组件被编译为JavaScript文件,加载然后安装在DOM节点上。然后它应该从window.config
读取配置对象。 (这不是我可以改变的。)
我怎么能...从window.config.title
读取一个字符串,用于我的Elm组件?我看过端口,但它似乎要求我修改生成的JavaScript或包装它周围的东西。这是唯一的选择吗?如果是这样,我怎么才能简单地读取变量的值?
编辑:更新为榆木0.19
如果您的配置在应用程序的生命周期内没有变化,那么使用Browser.element或Platform.worker可能会得到最好的服务。
这允许您的main
函数在初始化期间从Javascript接受单个值。该单个值可以是一个简单的javascript对象,也可以包含嵌套属性。重要的是在Elm中定义它的形状。
假设您的javascript配置如下所示:
<script>
window.options = {
foo: 123,
nested: { bar: "abc" }
};
</script>
为了能够将其传递到您的Elm文件,您可以定义匹配的形状,如下所示:
type alias Flags =
{ foo : Int
, nested : { bar : String }
}
现在你可以在你的Elm文件中使用Browser.element
或Platform.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
)
最后一个难题是在初始化期间将您的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>