functional-programming - Elmでどのように動的に入力を作成しますか？

Question

押すと、フォームに新しい入力（またはテキストエリア）を追加するボタンを作成したいと思います。

Answer 1

ボタンがクリックされるたびにテキスト フィールドが追加されるようにするには、表示されるテキスト フィールドの数をボタンがクリックされた回数と同じにする必要があります。countIf idボタンのシグナル¹を使用して、ボタンがクリックされた頻度を示すシグナルを作成できますclicked。

入力のリストがある場合、flowそれらを互いの下 (または上) に表示するために使用できます。数値を受け取り、ボタンとテキスト フィールドnを含むリストを生成する関数を作成するのは、かなり簡単です。n

これliftで、その関数をボタンのクリック数をカウントするシグナルに接続し、それを関数と組み合わせるだけで、flow入力を動的に作成するボタンができました。

(btn, clicked) = Input.button "Click me!"

-- Count how often the clicked signal is true
clicks = countIf id clicked

main = lift2 flow (constant down) $ lift nInputs clicks

nInputs n =
  let helper n acc =
    if n<=0 then btn : acc
    else
      -- Input.textField returns a pair containing the field as well as a signal
      -- that you can use to access the field's contents. Since I don't actually
      -- ever do anything with the contents, I just ignore the signal here.
      -- In your real code, you'd probably want to keep the signal around as well.
      let (field, _) = Input.textField $ "input " ++ (show n)
      in helper (n-1) $ field : acc
  in helper n []

¹ を使用countするだけで、信号が変化する頻度がカウントされます。クリックごとにシグナルの値が true に変更され、その後 false に戻るため、クリックごとに 2 つの変更がカウントされます。を使用countIf idすることで、シグナルが真である回数のみをカウントし、したがってクリック数をカウントします。

Answer 2

Elm 0.8 の時点で、これは実際に実行できます。リリースのお知らせ、オンライン リファレンスの入力グループのセクション、およびコード例を参照してください。