コンパイラかく語りき

import { Fun } from 'programming'

ElmでつくるTodoList(4)

ひきつづき、TodoListをつくっていきます。 

chuckwebtips.hatenablog.com

 

今回はちょっとした機能追加をします。

 

現在、Todoを追加する際には、空文字でも追加できてしまいます。

f:id:chuck0523:20160422080632p:plain

(2つめのTodoが空文字)

そこで、空文字の場合はAddボタンを押せないようにします。

 

Addアクションの修正

たぶん、TodoListのAddアクションを修正すればよさそう。

TodoListには、Modelとして、addTextという項目を持ちます。これは、テキストエリアへの入力が記録される値で、Addボタンを押すと、Todoのテキストとして利用されます。

 

addTextが空の場合に、Addアクションを押せないようにします。

 

updateでreturn false

現在のaddアクションはこんな感じです。

gist831f9728e9498357a584967f9a30e599

ここで、処理の最初に

if model.addText == "" then return false

みたいな終了文を書けば良さそうですね。

ただ、↑を書いたらコンパイラに怒られました。うーむ。

 

viewで対処

考えた結果、viewで対処することにしました。

まず、新しく関数を1つ追加しました。

gist8ce9166472bb77f5e0ceb65960da20f3

 

この関数は、model.addTextの有無に応じて、違うDOMを返します。addTextが空ではない場合のみ、Add関数が付与されたbuttonを返します。

なので、結果として、入力がなければAddアクションは実行されないことになります。

 

view全体はこんな感じです。

gistc4dcad94473cfc5f5000c2492eebb815

 

うーむ、、、もうちょっとリファクタリングの余地がありそう。。今度やります。

 

ブラウザ確認

ブラウザで確認します。

f:id:chuck0523:20160422083411p:plain

まず、初期状態はこんな感じ。Addという文字が薄いグレーになっています。

この状態でAddボタンを押してもTodoは追加されません。

 

1文字以上入力すると、このようにAddの文字色が黒になり、追加可能になります。

f:id:chuck0523:20160422083543p:plain

 

Todoが追加されると、model.addTextは空になるので、Addボタンは再び無効化されます。

f:id:chuck0523:20160422083613p:plain

 

おしまい

というわけで、軽くではありますが、機能を追加しました。

次回も引き続き、TodoListっぽい機能を追加します。

 

Github

github.com