16: 編集フォームから編集できるようにする

1. 編集できるようにする

編集ダイアログにモデルを渡し、サブミットしたらモデルデータを変更してダイアログを閉じるようにする。

App.CalendarItemView = Backbone.View.extend({
  //...
  onClick: function() {
    App.formDialogView.open(this.model);
  }
});

App.FormDialogView = Backbone.View.extend({
  events: {
    'submit form': 'onSubmit',
    'click .dialog-close': 'close'
  },

  initialize: function() {
    this.listenTo(this.collection, 'change', this.close);
    this.listenTo(this.collection, 'invalid', this.onError);
  },
  render: function() {
    this.$('input[name="title"]').val(this.model.get('title'));
    this.$('input[name="datetime"]').val(this.model.dateFormat('YYYY-MM-DDTHH:mm'));
    this.$el.show();
  },
  open: function(model) {
    this.model = model;
    this.render();
  },
  close: function() {
    this.$el.hide();
  },
  onSubmit: function(e) {
    e.preventDefault();

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

    this.model.set({
      title: title,
      datetime: moment(datetime)
    }, { validate: true });
  },
  onError: function(model, message) {
    alert(message);
  }
});

2. 編集したらテーブルを再描画する

CalendarViewでモデルが変更されたらrenderを呼ぶようにする。

js/view.js

App.CalendarView = Backbone.View.extend({
  initialize: function() {
    this.current = moment();
    this.render();

    this.listenTo(this.collection, 'add change', this.render);
  },

編集フォームでデータを編集して表示も変われば成功です。