このエントリは[Backbone.js Advent Calendar 2012](http://www.adventar.org/calendars/15)の 5 日目の記事です。

[前回](2012/12/backbonelocalstoragejsbackbonesync)の Backbone.Sync と backbone.localstorage.js の話の続きで、Backbone.Model から見る Backbone.Collection との関連性についてお話します。



### このエントリでお伝えしたいこと。

1.  何をすると Backbone.Model と Backbone.Collection の結びつくか。

## はじめに

前回のテストコードですが、[Backbone.localstorage.js 本家](http://goo.gl/v1gFX)のテストコードを見たところ、どうやら Backbone.Collection の create()を使うのが正しい使い方ようなので、次のように書き直しました。  
（ちなみにユニットテストは[Jasmine](http://goo.gl/IUtf)を使ってます。）

```js
describe("test localstorage", function () {
  beforeEach(function () {
    this.collection = new collection();
  });

  it("test collection create", function () {
    this.collection.create({
      title: "hello",
    });

    var model = this.collection.at(0);
    expect(this.collection.localStorage.find(model)).not.toBe(null);
    expect(this.collection.localStorage.find(model).title).toBe("hello");
  });
});
```

なんだ Collection の create()を使えば良いのか。一件落着！  
と思いたいのですが。。。

確か、model.localStorage か model.collection.localStorage が存在しない場合、デフォルトの Ajax が動くのは前回確認済みです。上のテストコードのどこを見てもそのようなことはしていませんね。
なにやら黒魔術的な臭いがします。

## Backbone.Model と Collection の近しい関係

黒魔術的な臭いがする場合は、ソースコードを読むのが一番です。まず、Collection の`create()`を読みました。

```js
// Create a new instance of a model in this collection. Add the model to the
// collection immediately, unless `wait: true` is passed, in which case we
// wait for the server to agree.
create: function(model, options) {
  var coll = this;
  options = options ? _.clone(options) : {};
  model = this._prepareModel(model, options);
  if (!model) return false;
  if (!options.wait) coll.add(model, options);
  var success = options.success;
  options.success = function(nextModel, resp, xhr) {
    if (options.wait) coll.add(nextModel, options);
    if (success) {
      success(nextModel, resp);
    } else {
      nextModel.trigger('sync', model, resp, options);
    }
  };
  model.save(null, options);
  return model;
},
```

上は Backbone.js の 766 行目辺り。ざっと目を通してすぐ分かりました。

```js
model = this._prepareModel(model, options);
```

怪しすぎる ww。  
なので、`_prepareModel()`を読みました。

```js
// Prepare a model or hash of attributes to be added to this collection.
_prepareModel: function(model, options) {
  options || (options = {});
  if (!(model instanceof Model)) {
    var attrs = model;
    options.collection = this;
    model = new this.model(attrs, options);
    if (!model._validate(model.attributes, options)) model = false;
  } else if (!model.collection) {
    model.collection = this;
  }
  return model;
},
```

上は Backbone.js の 809 行目辺り。ありました。見たかったのはこれです。

```js
model.collection = this;
```

なるほど、こんなところで Model に Collection がセットされていましたね。
これで、上のテストコードがパスできる理由も分かりました。これですっきりです。

他にも Collection の中で`_prepareModel()`呼んでいる場所を調べたところ、`create()`も含めて 4 箇所ありました。

- [add](http://backbonejs.org/#Collection-add)
- [push](http://backbonejs.org/#Collection-push)
- [unshift](http://backbonejs.org/#Collection-unshift)
- [create](http://backbonejs.org/#Collection-create)

まだ Backbone の全体を見通せてないので、作ってて所々（？）となることがあります。ソースコード印刷して電車で読むことにしました。

**Backbone.js Advent Calendar 2012**

- ← 前日　[Backbone.js の MVC について](http://goo.gl/J28KM)（@tomof）
- → 後日　[Backbone.js 日本語リファレンス](http://ando19721226.github.com/Backbone/)[](http://www.blogger.com/blogger.g?blogID=5596737312884238083)（@ando）

Backbone.Modelから見るBackbone.Collectionとの関連性

このエントリは[Backbone.js Advent Calendar 2012](http://www.adventar.org/calendars/15)の 2 日目の記事です。

Backbone.js には[Backbone.Sync](http://goo.gl/xIbI9)という Model とサーバ側のリソースを常に同期させる仕組みがあり、これを Override することで同期させる仕組みを自体を柔軟に変えることができます。  
今回は[backbone.localstorage.js](http://goo.gl/qBk6P)のユニットテストを通じて、Backbone.Sync を Override する仕組みについて少しお話したいと思います。



### このエントリでお伝えしたいこと。

1.  backbone.localstorage.js はどのように Backbone.Sync と Override しているか。
2.  backbone.localstorage.js は Backbone.Sync を Override するコードの良いお手本だと思う。。

## はじめに

まず、きっかけですが、backbone.localstorage.js を使って localstorage に Backbone.Model を保存する簡単なサンプルを作ってユニットテストしたところ、思わぬところで fail してしまったことです。  
Backbone.js 側のコードとユニットテストのコードは次のとおりです。
（ちなみにユニットテストは[Jasmine](http://goo.gl/IUtf)を使ってます。）

app.js

```js
var model = Backbone.Model.extend({
  title: "",
});

var collection = Backbone.Collection.extend({
  model: model,
  localStorage: new Backbone.LocalStorage("backbone-blog-post"),
});
```

test.model.before.js

```js
describe("test localstorage", function () {
  beforeEach(function () {
    this.model = new model();
  });

  it("test model save()", function () {
    //Error: A "url" property or function must be specified
    this.model.save({
      title: "hello",
    });
    expect(this.model.collection.localStorage.find(this.model)).not.toBe(null);
    expect(this.model.collection.localStorage.find(this.model).title).toBe(
      "hello"
    );
  });
});
```

ユニットテストを実行した結果は、次のようなエラーが発生しました。

> Error: A "Url" property or function must be specified

初めは localstorage に保存しているのに、なぜ URL が必要なのかわかりませんでした。

## localstorage に保存するはずなのになぜ URL が必要??

その前に、Backbone.Model の`save()`と`Backbone.Sync`の関係、`Backbone.Sync`のデフォルトの挙動について抑えておく必要があります。

まず、Backbone.Model の`save()`と Backbone.Sync の関係についてですが、Backbone.Model の`save()`を呼び出した際に、内部で`sync`イベントが発生して、Backbone.Sync に定義されている function が実行されるようになっています。  
その際に、Backbone.Sync はデフォルトでサーバサイド側の REST API
(GET/PUT/POST/DELETE)と Ajax（jQuery か Zepto 依存）で通信をするようになっています。

これらの事により、先のエラーは Ajax 通信をしているため発生していることが容易に予想できるのですが、そもそも backbone.localstorage.js は Backbone.Sync を Override しているので、なぜ Ajax のコードが生きているのか分かりませんでした。

## なぜ Ajax が動いているのか?

この問題を理解するために backbone.localstorage.js のソースを読みました。  
（以下、核心部分だけ抜粋します。）

```js
// Override 'Backbone.sync' to default to localSync,
// the original 'Backbone.sync' is still available in 'Backbone.ajaxSync'
Backbone.sync = function (method, model, options, error) {
  return Backbone.getSyncMethod(model).apply(this, [
    method,
    model,
    options,
    error,
  ]);
};
```

上は backbone.localstorage.js の`134行目`辺り。
Backbone.Sync を Override しているところです。中で`Backbone.getSyncMethod()`を return しています。
自分でカスタムする場合は、ここに直接 Override するコードを書いても良さそうです。

```js
Backbone.ajaxSync = Backbone.sync;

Backbone.getSyncMethod = function (model) {
  if (
    model.localStorage ||
    (model.collection && model.collection.localStorage)
  ) {
    return Backbone.LocalStorage.sync;
  }

  return Backbone.ajaxSync;
};
```

上は backbone.localstorage.js の`123行目`辺り。本問題の核心部分です。  
読めば一目瞭然なのですが、デフォルトの Backbone.Sync を`Backbone.ajaxSync`という別名で保存してました。

しかも、`Backbone.getSyncMethod`では

- model.localStorage
- model.collection.localStorage

いずれかのプロパティが存在しない場合、Backbone.ajaxSync が return されます。

これですべての謎が解けました。

## 最初のテストコードはどうあるべきだったのか?

先に結論ですが、次のコードでテストが通りました。

```js
describe("test localstorage", function () {
  beforeEach(function () {
    this.model = new model();
    //collectionをmodelにセットする
    this.collection = new collection();
    this.model.collection = this.collection;
  });

  it("test model save()", function () {
    this.model.save({
      title: "hello",
    });
    expect(this.model.collection.localStorage.find(this.model)).not.toBe(null);
    expect(this.model.collection.localStorage.find(this.model).title).toBe(
      "hello"
    );
  });
});
```

ただ、なんとなく違和感が残ります。

Model だけをテストする目的であればこれも有りだと思いますが、テストを通すためにコードを足したようでなんとなく気持ち悪いですし、何か使い方が間違っている気がします。  
（[次回](/2012/12/backbonemodelbackbonecollection/)はこの違和感を取り除いて行く過程を書きます。）

ちなみに、backbone.localstorage.js はコードが 140 行足らずなので読むのは非常に楽でした。
実際に Backbone.Sync を Override するコードを書く場合は、ぜひ参考にしたいと考えています。

**Backbone.js Advent Calendar 2012**

- ← 前日　[Backbone.js で今つくっている構成について](http://goo.gl/s9JLG)
- → 後日　[Backbone.js が自動でやってくれるところについて](http://goo.gl/WxdVo)

Tag: localstorage

Backbone.Modelから見るBackbone.Collectionとの関連性

backbone.localstorage.jsとBackbone.Syncのお話