tが空で入力された場合にエラーメッセージを表示してみ...
this.model.bind('change', this.render);
とあるので、モデルを変更する度に、そのフォームのレンダリングが行われます。
そのため、else以降の処理で、最初の
this.model.set({hasError: false});
を実行した時、レンダリングが行われます。
そのとき、その前にフォームを空で送信しているため、モデルのvalの値は空ですから、空のフォームが表示されることになります。
ですから、その後の
this.model.set({val: $('.js-get-val').val()});
を行っても、上記のレンダリングでフォームの中身が空となっているため、
$('.js-get-val').val()の値は空となり、
モデルに空の文字を入れていることになってしまっています。
その空の文字をタスクに追加しているため、空のタスクができあがるというわけです。
以上の説明で、モデルの変更とレンダリングメソッドの関係が理解できたと思います。
その仕組みを踏まえた上で、正しく動くよう改修してみてください。
this.model.set({hasError: false});
this.model.set({errorMsg:''});
this.model.set({val: $('.js-get-val').val()});
<修正後>
this.model.set({val: $('.js-get-val').val()});
this.model.set({hasError: false});
this.model.set({errorMsg:''});
これで解決しました。
ありがとうございました。
部活の学習一覧
Lesson 01 | jQueryでToDoリストを作ろう!〜htmlの実装〜
Lesson 02 | jQueryでToDoリストを作ろう!〜タスク追加機能の実装〜
Lesson 03 | jQueryでToDoリストを作ろう!〜DONE処理やタスク削除・編集モード開始の実装〜
Lesson 04 | jQueryでToDoリストを作ろう!〜更新処理・検索絞り込み処理〜
コーヒーブレイク
「投資の小話3」
Lesson 05
「backbone.jsの基本の機能と書き方〜modelの作り方・使い方〜」
Lesson 06
「backbone.jsの基本の機能と書き方〜Modelの作り方・使い方part2〜」
Lesson 07
「backbone.jsの基本の機能と書き方〜Viewの作り方・使い方〜」
Lesson 08
「bacbone.jsの基本の機能と書き方〜underscore.jsとtemplate機能〜」
Lesson 09
「bacbone.jsの基本の機能と書き方〜ViewとModelの連携前編〜」
Lesson 10
「bacbone.jsの基本の機能と書き方〜ViewとModelの連携後編〜」
Lesson 11 | backbone.jsで実際にToDoアプリを作ろう!〜タスクItemの作成〜
Lesson 12 | backbone.jsで実際にToDoアプリを作ろう!〜タスクItemの作成その2〜
Lesson 13 | backbone.jsで実際にToDoアプリを作ろう!〜タスクItemList前編〜
Lesson 14 | backbone.jsで実際にToDoアプリを作ろう!〜タスクItemList後編〜
Lesson 15 | backbone.jsで実際にToDoアプリを作ろう!〜タスク追加機能の実装〜
Lesson 16|React.jsの基本的な使い方〜babelとwebpack〜
Lesson 17|React.jsの基本的な使い方〜JSXとコンポーネントとprops〜
Lesson 18|React.jsの基本的な使い方〜stateとライフサイクル、仮想DOM〜
Lesson 19|React.jsの基本的な使い方〜formの実装方法〜
Lesson 20|React.jsの基本的な使い方〜複数のformの実装方法〜
Lesson 21|React.jsで実際にTODOアプリを作ろう!〜コンポーネント設計〜
Lesson 22|React.jsで実際にTODOアプリを作ろう!〜Taskコンポーネント〜
Lesson 23|React.jsで実際にTODOアプリを作ろう!〜ToDoListコンポーネント〜
Lesson 24|React.jsで実際にTODOアプリを作ろう!〜ToDoCreatorコンポーネント〜
Lesson 25|React.jsで実際にTODOアプリを作ろう!〜Searchコンポーネント〜
Lesson 26|React.jsとReduxで実際にTODOアプリを作ろう!〜Reduxの仕組み〜
Lesson 27|React.jsとReduxで実際にTODOアプリを作ろう!〜Reducers〜
Lesson 28|React.jsとReduxで実際にTODOアプリを作ろう!〜TodoCreator〜
Lesson 29|React.jsとReduxで実際にTODOアプリを作ろう!〜containers〜
Lesson 30|React.jsとReduxで実際にTODOアプリを作ろう!〜reduxの仕組みのおさらい〜
Lesson 31|Vue.jsの基本の機能と書き方〜v-bind・v-if〜
Lesson 32|Vue.jsの基本の機能と書き方〜v-for・v-on〜
Lesson 33|Vue.jsの基本の機能と書き方〜v-show・computed、transition〜
Lesson 34|Vue.jsの基本の機能と書き方〜コンポーネント・props・$emit〜
コーヒーブレイク
「はたらくプログラミング 第10話」
ご意見箱
<症状>
空送信したらエラーメッセージが出る。(正常)
↓
その後、何かしら文字を入れて「TODOを追加」ボタンを押すと、文字が入っているにも関わらず空白のリストが追加されてしまう(ここが異常)
↓
続けて何かしら文字を入れて「TODOを追加」ボタンを押すと、正常に文字が入ったリストが追加される(正常)
<コード>
サンプルコード117行目〜のaddTodoイベントにて以下のようにコード修正
======================================================
addTodo: function(e){
e.preventDefault();
console.log('送信された値:' + $('.js-get-val').val());
if(!$('.js-get-val').val() ||
$('.js-get-val').val().length === 0){
this.model.set({hasError: true});
this.model.set({errorMsg:'エラー: 空です。入力必須です。'});
$('.error').show();
this.model.set({val: $('.js-get-val').val()});
console.log('空送信のModel:');
console.log(this.model);
}else{
this.model.set({hasError: false});
this.model.set({errorMsg:''});
this.model.set({val: $('.js-get-val').val()});
listView.addItem(this.model.get('val'));
console.log('通常送信のModel:');
console.log(this.model);
}
}
====================================================
<確認したこと>
console.log(this.model);
で、this.modelの中身(val)を確認すると、
空送信時 → ""
空送信後に文字を入れて送信(空文字リストが追加されてしまう) → ""
その後、文字を入れて送信 → "入力した文字が入る"
となり、空送信した直後の文字入り送信の時のみ、空送信したような挙動をする(しかもエラーにならない)といった具合です。
空送信を連続で行っても、ずっとエラーが出たままで挙動としては問題ありません。
if文にて、
①$('.js-get-val').val()が存在しない or 文字の長さがゼロの場合
②それ以外
という条件分岐をしており、
addTodo: function(e){
e.preventDefault();
console.log('送信された値:' + $('.js-get-val').val());
この段階(条件分岐前)では、文字が入っていることでif文の②の条件に入って処理が進んでいるにも関わらず、最終的に中身が空文字になってしまっているというのがどうしても原因が分からず、行き詰まっています。
サンプルコード86行目〜のaddItemメソッド内でもconsole.logを使い、この段階ですでに中身が空になっていることまでは確認できています。
宜しくお願い致します。