• 「宿題1:inpu
    tが空で入力された場合にエラーメッセージを表示してみ...
  • きわっちきわっち 
    「宿題1:inputが空で入力された場合にエラーメッセージを表示してみよう」にて、エラーメッセージは出せたのですが、その後の挙動が少しおかしく質問させていただきます。

    <症状>
    空送信したらエラーメッセージが出る。(正常)

    その後、何かしら文字を入れて「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を使い、この段階ですでに中身が空になっていることまでは確認できています。

    宜しくお願い致します。
    回答 0

    ウェブカツコーチ 
    そのViewのinitializeメソッドに
    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:''});



    これで解決しました。
    ありがとうございました。