07: FormをViewクラスにする

1. view.jsを作成する

js/view.jsを作成し、index.htmlから読み込みます。

index.html

...
<script src="js/app.js"></script>
<script src="js/model.js"></script>
<script src="js/view.js"></script>
...

js/view.js

App.CreateFormView = Backbone.View.extend();

2. jQueryで書いていたcreateFormの部分をViewクラスに置き換える

Viewのクラスもnewすることでインスタンス化します。そのとき、elで要素の指定、collectionで内部で使用するコレクションを指定します。

js/app.js

window.App = {};

$(function() {
  var schedules = new App.Schedules();

  var createFormView = new App.CreateFormView({
    el: '.createForm',
    collection: schedules
  });

  $('.filterForm').submit(function(e) {
    // ...
  });

  schedules.on('add', function(model) {
    // ...
  });

  schedules.on('invalid', function(model, message) {
    // ...
  });
});

3. createFormをViewクラスにする

eventsプロパティでイベントを指定し、ハンドラをプロパティとして記述します。

js/view.js

App.CreateFormView = Backbone.View.extend({
  events: {
    'submit': 'onSubmit'
  },

  onSubmit: function(e) {
    e.preventDefault();

    var title = this.$('input[name="title"]').val();
    var datetime = this.$('input[name="datetime"]').val();

    this.collection.add({
      title: title,
      datetime: moment(datetime)
    }, { validate: true });
  }
});

フォームを送信して予定が登録されれば成功です。