ドットインストール「Backbone.js入門」前半

app.js.es6

'use strict';

require('babel-polyfill');

const _ = require('underscore');
const $ = require('jquery');
const Backbone = require('backbone');

/**
 * Backbone.js入門 (全22回) - プログラミングならドットインストール
 * http://dotinstall.com/lessons/basic_backbonejs
 */

// Model
class Task extends Backbone.Model {
  constructor(options) {
    _.defaults(options, {
      defaults: {
        title: 'do something',
        completed: false
      }
    });
    super(options);
  }
}

// Collection
class Tasks extends Backbone.Collection {
  constructor(options) {
    _.defaults(options, {
      model: Task
    });
    super(options);
  }
}

// View
class TaskView extends Backbone.View {
  constructor(options) {
    _.defaults(options, {
      tagName: 'li'
    });
    super(options);

    this.template = _.template($('#task-template').html());
  }

  render() {
    let template = this.template(this.model.toJSON());
    this.$el.html(template);
    return this;
  }
}

class TasksView extends Backbone.View {
  constructor(options) {
    _.defaults(options, {
      tagName: 'ul'
    });
    super(options);
  }

  render() {
    this.collection.each(task => {
      var taskView = new TaskView({model: task});
      this.$el.append(taskView.render().el);
    }, this);
    return this;
  }
}

(() => {
  let tasks = new Tasks([
    {title: 'task1', completed: true},
    {title: 'task2'},
    {title: 'task3'}
  ]);
  let tasksView = new TasksView({collection: tasks});
  $('#tasks').html(tasksView.render().el);
})();