Ошибка при попытке переключения между двумя встроенными приложениями Elm в одном узле - PullRequest
Новая
       15

Ошибка при попытке переключения между двумя встроенными приложениями Elm в одном узле

3 голосов
/ 09 июля 2019

Я пытаюсь динамически переключаться между приложениями 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.

И действительно, элемент каким-то образомудалено при рендеринге первого приложения.

Я не смог найти упоминаний об этом поведении в документации и хотел бы знать, возможно ли предотвратить это каким-либо образом, и ожидается ли это поведение.

Заранее спасибо

1 Ответ

4 голосов
/ 09 июля 2019

Причина в том, что первый модуль Elm заменит тег <main> на представление elm, поэтому следующий модуль Elm не сможет найти этот тег <main>.Вы можете проверить инструмент dev.

Мое решение: оберните ваши представления тегом main следующим образом.

Foo.elm 

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

Bar.elm 

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

Так можно найти и заменить тег <main> для второй кнопки.

...