尝试在同一节点中的两个嵌入式 Elm 应用程序之间切换失败

Question

我正在尝试根据用户输入在 Elm 应用程序之间动态切换。

这两个应用程序都通过 elm make 转译为 js 文件（例如：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.

事实上，在呈现第一个应用程序时，该元素以某种方式被删除了。

我在文档中找不到任何关于此行为的提及，我想知道是否有可能以任何方式防止这种情况发生，以及它是否是预期的行为。

提前致谢

Answer 1

原因是第一个 Elm 模块将用 elm 视图替换 <main> 标签，因此下一个 Elm 模块无法再找到 <main> 标签。你可以查看开发工具。

我的解决方案：像这样用 main 标签包裹您的观点。

Foo.elm

view model =
  node "main" 
    []
    [ div [] [ text "foo foo foo" ] ]

Bar.elm

view model =
  node "main" 
    []
    [ div [] [ text "bar bar bar" ] ]

所以它可以找到并替换第二个按钮的 <main> 标签。

尝试在同一节点中的两个嵌入式 Elm 应用程序之间切换失败

Failure trying to switch between two embedded Elm apps in the same node

elm