引き続き、ElmArchitectureの勉強をしていきます。
前回は動的にカウンターを作成する方法を学びました。
今回は、削除機能を改良して、それぞれのカウンターに削除ボタンをつけるようにします。
レンダリング関数の追加
個別のカウンターをレンダリングする際に、1つ処理を加えます。
ContextとviewWithRemoveButtonという関数を追加しました。
gist32e21f2fc7abecf1994bfd4f13d60fae
アクションの修正
カウンターを包含するカウンターリストの方を修正します。
修正箇所は主に、削除に関する箇所です。
gistdb86831803cb8316632020326804df13
アップデートの修正
update内のActionの中で、Removeを修正します。
gist046a2402401cd4e3573d2bc26bce3221
ビューの修正
最後にviewを修正します。
gistcb6cb189ed08836243803110f67bf96c
これにて、削除機能の改良は終了です。ボタンが個別に削除できるようになりました。
DEMO
http://chuck0523.github.io/JSPractise/elm/fancier-counter/index.html