我正在尝试根据用户输入在 Elm 应用程序之间动态切换。
这两个应用程序都通过 js 文件进行转译elm make（例如：Foo.js 暴露模块 Foo 和 Bar.js 暴露模块 Bar）
两个按钮运行通常的“Elm.[Foo|Bar].init(node:document.querySelector('main')”，这样理论上我可以在渲染任一应用程序之间切换。
<html>
<head>
<script src="[..]/foo.js"></script>
<script src="[..]/bar.js"></script>
</head>
<body>
<main></main>
<input value="Foo" type="button" name="Foo" onclick="Elm.Foo.init({node:document.querySelector('main')});">
<input value="Bar" type="button" name="Bar" onclick="Elm.Bar.init({node:document.querySelector('main')});">
</body>
</html>
需要明确的是，两个应用程序应该交替接管该元素。
当我第一次点击其中一个按钮时，应用程序会正确呈现，但第二次单击会产生以下错误
Error: What node should I take over? In JavaScript I need something like:
Elm.Main.init({
node: document.getElementById("elm-node")
})
You need to do this with any Browser.sandbox or Browser.element program.
事实上，该元素在渲染第一个应用程序时以某种方式被删除。
我在文档中找不到任何提及此行为的信息，我想知道是否可以以任何方式防止这种情况发生，以及这是否是预期的行为。
提前致谢
原因是第一个模块将用 elm 视图Elm替换该标签，因此下一个模块将无法再找到该标签。您可以查看开发工具。<main>Elm<main>
main我的解决方案：用这样的标签包装您的视图。
榆树
view model =
node "main"
[]
[ div [] [ text "foo foo foo" ] ]
榆树
view model =
node "main"
[]
[ div [] [ text "bar bar bar" ] ]
所以它可以找到并替换<main>第二个按钮的标签。
| 归档时间： |
|
| 查看次数： |
378 次 |
| 最近记录： |