4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Backbone.Collection に1つ以上の Model が格納できない問題を解決する

Last updated at Posted at 2015-02-16

問題について

Collection に格納しようとしている Modelattributes、またはサーバからのレスポンスに、 オブジェクト構造をもつ id というプロパティ がありますか。
もしあるならば、十中八九それが原因とみて間違いないでしょう。

ここで重要なのは、オブジェクト構造を持つプロパティの名前が id であるということです。

オブジェクト構造をもつidプロパティを抱えたオブジェクト
{
    id: {
        shopId : 'hogeShop',
        humanId: 'TaroYamada'
    }
}

このような構造を持つオブジェクトを setメソッドaddメソッドCollection に複数詰めようとしても、Collection には1つの Model しか格納されません。

問題が起きるコード
var attrs = [
    { id: { shopId : 'hogeShop', humanId: 'TaroYamada' } },
    { id: { shopId : 'hogeShop', humanId: 'JiroTanaka' } }
];
new Backbone.Collection(attrs);

実行結果(GoogleChrome for Windows 40.0.2214.111 m)

hoge.PNG

配列の1番目だけが Model として格納されてしまいました。

調査しきれていない調査

Collection.set 周りのコードを調べてみたところ、CollectionModel を詰める過程で、詰めた履歴を変数に保持する際に Model.id を利用していました。

デフォルトの状態では、 Model.id は、Model.attributes.id を値に持ちます。
このとき、Model.id の値がオブジェクト構造になってしまっていると、Collection へ格納する際に期待した振る舞いをすることができなくなってしまうようです。

お恥ずかしながら、 Collection.set 周辺の挙動について詳細を読み解ききれませんでした。
この部分についてご存じの方がいらっしゃいましたら、コメントにてご教授頂ければ幸いです。

対処法

Model.id にオブジェクト構造でない値を指定してあげれば良いので、 Backboneオブジェクトごとに自動生成される cid を指定して問題を回避するのが良いみたいです。
Model.idAttribute に任意の文字列を渡すと、 Model.attributes のどの値を Model.id として持たせたいか指定することができます。

問題のないコード
var attrs = [
    { id: { shopId : 'hogeShop', humanId: 'TaroYamada' } },
    { id: { shopId : 'hogeShop', humanId: 'JiroTanaka' } }
];
new Backbone.Collection(attrs, { model: Backbone.Model.extend({ idAttribute: 'cid' }) });

実行結果(中身の確認のため、変数に取り出しています)

kitai.PNG

今度はうまくできました。やったね。
実際のコードではこのような書き方になるのかな、と思います。

collection.js
var Collection = Backbone.collection.extend({
    model: Backbone.Model.extend({ idAttribute: 'cid' });
});
var collection = new Collection(attrs);

突っ込みどころ、誤った認識をしている箇所がありましたら是非ご指摘ください。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?