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

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

概要

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

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

名前MVC での分類役割
Backbone.ModelModelデータの取得・保存・更新・削除
Backbone.CollectionModelModel の集合
Backbone.ViewViewDOM の監視と操作
Backbone.RouterControllerURL の監視
Backbone.HistoryControllerRouter の履歴監視

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

WEB+DB PRESS Vol.68
WEB+DB PRESS Vol.68

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

公式リファレンス

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

インストール

npm install し、

% npm install --save jquery underscore backbone

こんな形で読込。

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

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

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

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

いろいろ自信なし。

Model, Collection, View(前半)

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

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

_.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)
James Sugrue
翔泳社
売り上げランキング: 333,788

補遺