ひきつづき、TodoListをつくっていきます。
今回はちょっとした機能追加をします。
現在、Todoを追加する際には、空文字でも追加できてしまいます。
（２つめの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で対処することにしました。
まず、新しく関数を１つ追加しました。
gist8ce9166472bb77f5e0ceb65960da20f3
この関数は、model.addTextの有無に応じて、違うDOMを返します。addTextが空ではない場合のみ、Add関数が付与されたbuttonを返します。
なので、結果として、入力がなければAddアクションは実行されないことになります。
view全体はこんな感じです。
gistc4dcad94473cfc5f5000c2492eebb815
うーむ、、、もうちょっとリファクタリングの余地がありそう。。今度やります。
ブラウザ確認
ブラウザで確認します。
まず、初期状態はこんな感じ。Addという文字が薄いグレーになっています。
この状態でAddボタンを押してもTodoは追加されません。
１文字以上入力すると、このようにAddの文字色が黒になり、追加可能になります。
Todoが追加されると、model.addTextは空になるので、Addボタンは再び無効化されます。
おしまい
というわけで、軽くではありますが、機能を追加しました。
次回も引き続き、TodoListっぽい機能を追加します。
