Backbone.js - モデル(Validate)

# 概要
Backbone.jsのモデルで入力検証のやり方を調べてみる

## ローカル環境準備
dockerでnginxを起動して環境を整える。

```bash:ターミナル
$ docker-compose build
$ docker-compose up -d
```
※ 学習ように作ったコードはgithubにアップしています
https://github.com/reflet/sample-backbone.js

## サンプルコード
Modelで入力検証するサンプルを作ってみる。

```html:./src/html/model2-validate.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Backbone.js学習 [Model]</title>
</head>
<body>
    <h1>Model - 入力検証</h1>
    <p>モデルで入力検証をやってみる</p>

    <script src="https://cdn.jsdelivr.net/npm/underscore@1.9.1/underscore.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/backbone@1.4.0/backbone.min.js"></script>
    <script>
        const Person = Backbone.Model.extend({
            initialize: function (attrs, options) {
                console.log('initialize', attrs, options);
            },
            validate: function (attrs) {
                console.log('validate', attrs);

                var errors = [];
                if (_.isEmpty(attrs.name)) {
                    errors.push({name: 'name', message: '名前が入力されていません'});
                }
                if (_.isEmpty(attrs.age)) {
                    errors.push({name: 'age', message: '年齢が入力されていません'});
                }
                return errors.length > 0 ? errors : false;
            }
        });

        const hanako = new Person();
        hanako
            .bind('invalid', function (model, error) {
                console.log('invalid', error);
            })
            .bind('change', function(){
                console.log('change');
            })
            .bind('change:name', function(){
                console.log("change:name");
            });

        var check = hanako.set({name: '', age: ''}, {validate: true}); // validate option required!!
        if (check !== false) {
            console.log('success', hanako.toJSON());
        } else {
            console.log('error', hanako.toJSON());
        }
    </script>
</body>
</html>
```

動作確認
正常に入力検証ができたようです。
![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142279/64f0042e-2f15-d625-aceb-9caee7535362.png)

## まとめ
下記のように個別にデータをセットしてvalidate実行したかったが、うまく行かず断念。

```js:サンプル
hanako.set('name', '');
hanako.set('age', '');
if (hanako.validate === true) {
    console.log('success', hanako.toJSON());
} else {
    console.log('error', hanako.errors);
}
```
validateionなどのプラグインなどを追加したらできそうな感じがするが、
今回は標準機能を学習するためここではやらないことにします。

## 参考サイト
- [github - backbone.js](https://github.com/jashkenas/backbone/blob/master/backbone.js)
- [Backbone.jsの基本チュートリアル](https://www.sejuku.net/blog/106675)
- [Backbone.js入門 「Model」](https://qiita.com/yuku_t/items/5acef8dd49f67fd7813c)
- [backbone validate method doesn't trigger in my case](https://stackoverflow.com/questions/40180263/backbone-validate-method-doesnt-trigger-in-my-case)
- [Backbone.js のモデルの検証機能を利用する](https://www.ipentec.com/document/javascript-backbone-js-model-validate-value)
- [Backbone.js model.validationError](https://www.javatpoint.com/backbonejs-model-validationerror)
- [Baby Steps to Backbone.js: Model Validation](https://dzone.com/articles/baby-steps-backbonejs-model)
- [Backbone.jsでつくるMVPなUIパターン](https://dev.classmethod.jp/ria/backbone-js-mvp-ui-list/)

以上