gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 16:55:36 25 4
gpt4 key购买 nike

我正在尝试根据用户输入在 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.

事实上,在渲染第一个应用程序时,该元素会以某种方式被删除。

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

提前致谢

最佳答案

原因是第一个Elm模块将替换 <main>用榆 TreeView 标记所以下一个 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 - 尝试在同一节点中的两个嵌入式 Elm 应用程序之间切换失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56943428/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com