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应用程序之间切换失败

1 个答案: