Javascript 如何在现有服务器呈现的webapp中开始使用Elm？

我有一个CRUD应用程序，它主要在服务器端呈现为静态页面，然后在加载时使用JavaScript进行丰富

我正在看Elm示例，看到它生成DOM元素并使它们都是动态的

我想知道我是否可以使Elm在现有页面上工作，其中已经有一组DOM元素。它应该是这样工作的吗

比如，我在页面上有一个无序列表：

<ul class="items-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
<ul>

项目1
项目2
项目3

---

如何将我的Elm应用程序附加到此列表，并使其成为应用程序的一部分，以便如果用户与列表交互，Elm处理事件和模型更改？

Elm作为小部件或整体最有效。多个小部件之间的通信状态会很快变得复杂。理想情况下，您并不想生活在一个Elm和常规DOM都应该互操作的世界中。如果可以的话，就像页眉/页脚/侧边栏一样，内容中的列表是您想要尝试维护的。您最好为列表发送JSON并呈现它。如果你做不到，我会用虚拟DOM替换内容

//: HTMLElement
const itemsList = document.querySelector(".items-list")

//: [String]
const items = Array.from(
  itemsList.querySelectorAll("li"), 
  (li, _) => li.textContent.trim()
)

// Clear list & Mount your app in the list passing the list data in
// as a flag
itemsList.innerHTML = ""
const app = Elm.Main.embed(itemsList, { items })

现在，您已经将列表数据保存到Elm小部件中，并且可以执行您想要的任何Elm-y操作。你可能会考虑在页面上隐藏页面并使用复杂的端口来查询DOM，就像它是XML数据一样，但是我不建议只在代码> HTML。现在，最好让虚拟DOM成为您的应用程序—这里不是jQuery之地

FWIW，服务器端渲染似乎被安排在Elm下一版本中。

Array.from（itemsList.queryselectoral（“li”））.map（（li，

比

Array.prototype.map.call（itemsList.queryselectoral（“li”），（li，