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

大枠を知りたくてちょっと調べた。ES2015 っぽく書きながら勉強。

Contents

概要

こちらを参考にさせて頂きました。

Backbone.js を基礎からやってみよう – akiyoko blog
Backbone.jsとは | CodeGrid

MV* 問題で混乱したので、下記で概要を把握。

名前	MVC での分類	役割
Backbone.Model	Model	データの取得・保存・更新・削除
Backbone.Collection	Model	Model の集合
Backbone.View	View	DOM の監視と操作
Backbone.Router	Controller	URL の監視
Backbone.History	Controller	Router の履歴監視

はじめよう Backbone.js from Hiroki Toyokawa

PDF アーカイブをあさると、WEB+DB PRESS Vol.68 2012/04/24 号で「比較的成熟していて人気のある MVC フレームワーク」として紹介されていたので読む。

WEB+DB PRESS Vol.68

posted with amazlet at 16.06.23

名村卓三宅陽一郎白土慧勝間亮石田忠司牧本慎平 A-Listers 近藤宇智朗はまちや2 mala じゅんいち☆かとう並河祐貴小野修司中島聡森田創小飼弾田籠聡天野祐介 cho45 大和田純
技術評論社
売り上げランキング: 421,074

Amazon.co.jpで詳細を見る

公式リファレンス

以下のバージョンで動かした。

Backbone.js … v.1.3.3
Underscore.js … v.1.8.3
jQuery API Documentation … v.2.2.4

インストール

npm install し、

% npm install --save jquery underscore backbone

こんな形で読込。

'use strict';
var $ = require("jquery");
var _ = require("underscore");
var Backbone = require("backbone");

以下を使って require + ES6 する。

DriftwoodJP/sandbox-es6: sandbox es6(2015)

ドットインストールを ES6 に書き換える

Backbone.js入門 (全22回) – プログラミングならドットインストール

こちらを参考に試行錯誤した。

tastejs/todomvc-backbone-es6: Backbone TodoMVC rewritten using ES6
masakielastic/backbone-es6-example: Backbone.js と EcmaScript 6 (ES6) のコードの例です。

いろいろ自信なし。

Model, Collection, View（前半）

ドットインストールの前半をやった後、勉強のために ES6 に書き換えてみた。

super() に引数を this.tagName = 'li' のような形で渡せずに悩んだ。

Backbone and ES6 Classes · Issue #3560 · jashkenas/backbone
Underscore.js

_.defaults を使う。

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

ToDo アプリの作成（後半）

突然、initialize が出てきて監視の流れになって困った。最近は listenTo を使うようなのでそれっぽく書き換えた。
View template? の index.html で completed が Undefined で困った。this.model.attributes.completed とした。

所感

ドットインストールのサンプルでは、Backbone.Router, Backbone.History, LocalStorage あたりは利用されていないので、下記などを参考にさらに読み解く必要がありそう。

いろいろ理解が足りていないので、とりあえず保留。。。
書籍については、今読むならこれらしい。

入門Backbone.js (Programmer’s SELECTION)