読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

Elm-Architecture入門(5)

Elm

引き続き、ElmArchitectureの勉強をしていきます。

 

chuckwebtips.hatenablog.com

 

前回は動的にカウンターを作成する方法を学びました。

今回は、削除機能を改良して、それぞれのカウンターに削除ボタンをつけるようにします。

github.com

 

 レンダリング関数の追加

個別のカウンターをレンダリングする際に、1つ処理を加えます。

ContextとviewWithRemoveButtonという関数を追加しました。

gist32e21f2fc7abecf1994bfd4f13d60fae

 

アクションの修正

カウンターを包含するカウンターリストの方を修正します。

修正箇所は主に、削除に関する箇所です。

gistdb86831803cb8316632020326804df13

 

アップデートの修正

update内のActionの中で、Removeを修正します。

gist046a2402401cd4e3573d2bc26bce3221

 

ビューの修正

最後にviewを修正します。

gistcb6cb189ed08836243803110f67bf96c

 

 

これにて、削除機能の改良は終了です。ボタンが個別に削除できるようになりました。

f:id:chuck0523:20160403155245p:plain

 

DEMO

http://chuck0523.github.io/JSPractise/elm/fancier-counter/index.html

 

写経

github.com