既存のサーバーレンダリングWebアプリケーションでElmの使用を開始するにはどうすればよいですか？

Question

私は主にサーバー側で静的ページとしてレンダリングされ、その後読み込み時にJavaScriptで充実したCRUDアプリケーションを持っています。

私はElmの例題を見て、DOM要素を生成し、それらがすべて動的になることを確認しています。

すでに存在するDOM要素のセットを使用して、既存のページでElmを動作させることができるのだろうかと思います。これはまったく同じように動作するはずですか？

言って、私は、ページ上の順不同のリストがあります：

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

どのように私はこのリストに私のエルムアプリを添付し、ユーザーがリストと相互作用している場合ようにそのアプリの一部にするかを、 Elmはイベントとモデル変更を処理しますか？

Answer 1

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 }) 

で内容を置き換えたい今、あなたはエルムウィジェットにあなたのリストデータを持っているとあなたが望むものは何でもエルム-yのことを行うことができます。ページを視覚的に隠すことや、複雑な一連のポートを使用してそのDOMをXMLデータのように照会することも考えられますが、JSONデータの場合はHtml.send以上にすることはお勧めしません。今は仮想DOMをアプリケーションにするのが最善です。これはjQueryの土地ではありません。

FWIWでは、サーバー側のレンダリングがElmの次のバージョンの予定です。