Question

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

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

我想知道我是否可以让Elm在已经存在一组DOM元素的现有页面上工作。这应该是这样的吗？

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

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

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

Answer 1

榆树最适合作为小部件或整体结构。几个小部件之间的通信状态将变得非常复杂。理想情况下，你真的不想生活在一个榆树和常规DOM都应该互操作的世界里。可以正常的情况就像页眉/页脚/侧边栏，内容中的列表是您想要尝试维护的内容。您最好为您的列表发送JSON并进行渲染。如果你不能这样做，我会用虚拟DOM替换内容

import './rxjs-operators';

现在，您将列表数据放入Elm小部件中，可以执行任何您想要的Elm-y事务。您可以考虑直观地隐藏页面并使用一系列复杂的端口来查询该DOM，就像它是XML数据一样，但我不建议只使用//: 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 })来获取JSON数据。现在最好让虚拟DOM成为你的应用程序 - 这不是jQuery的地方。

FWIW，似乎服务器端渲染是针对Elm下一版本的。

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

1 个答案: