14: CalendarItemViewを作成

1. CalendarItemViewを作成する

予定のリストアイテムひとつひとつもViewクラスにしておきます。CalendarItemViewを以下のように定義します。

js/view.js

//...

App.CalendarItemView = Backbone.View.extend({
  tagName: 'li',

  template:
    '<time><%= date %></time>' +
    '<span><%= title %></span>',

  initialize: function() {
    this.render();
  },
  render: function() {
    var html = _.template(this.template, {
      date: this.model.dateFormat('HH:mm'),
      title: this.model.get('title')
    });

    this.$el.html(html);
  }
});

2. CalendarCellViewのreder部分を書き換える

CalendarCellViewのrenderで予定のリストアイテムをつくっている部分をCalendarItemViewを使った記述に書き換えます。

js/view.js

App.CalendarCellView = Backbone.View.extend({
  //...
  render: function() {
    //...

    _.each(schedules, function(model) {
      var item = new App.CalendarItemView({ model: model });
      $list.append(item.el);
    }, this);
  }
});