Backbone.Collectionに突っ込んでみる

2013-02-23T00:00:00+00:00 Backbone.js JavaScript

色々ドキュメント読みつつ進めてみた

index.js

var App = {
  "Models": {},
  "Collections": {},
  "Views": {}
};

// Backbone.Model
App.Models.Sample = Backbone.Model.extend({
  "idAttribute": "item_id" // model.idで参照可能なattributesキーを設定
});

// Bacakbone.Collection
App.Collections.Sample = Backbone.Collection.extend({
  "model": App.Models.Sample, // Backbone.Collectionが参照するBackbone.Model
  "url": "http://localhost:5000/fetch/samples", // fetchで使用するURL
  "parse": function(response) {
    if (!_.isArray(response)) {
      return;
    }

    // レスポンスは[{ id: 1 }]な感じで返ってくるけど、idAttributeがitem_idになっているので、ここでitem_idを動的に作っておく

    response.forEach(function(entry) {
      entry.item_id = parseInt(entry.id) + 100;
    });

    return response;
  }
});

// Backbone.View (SampleView)
App.Views.SampleView = Backbone.View.extend({
  "el": $("#content"),
  "render": function() {
    var el = this.$el;

    var col = new App.Collections.Sample();

    // fetch.successなイベントの前にresetイベントが発生する模様。初期化処理とかを行うとか
    col.on("reset", function() {
      this.$el.children().remove();
    }, this);

    col.fetch({
      "data": { "page": 1 },
      "success": function(collection) {
        // 前回だと引数に指定されるmodelsを利用していたけど、それだとBackbone.Modelにならないらしく、引数に指定されるBackbone.Collectionな参照を利用する事で可能な模様
        collection.each(function(model) {
          el.append($("<h2>").text(model.get("name")));
        });
      }
    });
  }
});

// Backbone.View (ButtonView)
App.Views.ButtonView = Backbone.View.extend({
  "el": $("#btn"),
  "initialize": function() {
    // 初期化時に指定されているエレメントに動的にクラスを割り当て設定を行う
    // 別に必要ないけど、Backbone.Viewスコープでそういうのをやる場合どうするのかっていう所な疑問が出たので(ry
    this.$el.addClass("btn btn-large btn-primary");
  },
  "events": {
    // クリックイベント
    "click": function() {
      new App.Views.SampleView().render();

      // this.remove();
    }
  }
});

new App.Views.ButtonView();

var c = new App.Collections.Sample();

// Backbone.Collection.addをするとaddなイベントがtriggerされる模様
c.on("add", function(model) {
});

// 使ってみるだけなので変数自体は使わないオチ
c.sync(
  "read", // read/create/update/deleteが指定可能
  new App.Models.Sample(), // Backbone.Modelにsyncイベントをtriggerする模様なので必要っぽい。nullとかにするとそれ関係でエラーになる
  {
    "url": "http://localhost:5000/fetch/samples",
    "success": function(model, resp, options) {
      if (!_.isArray(resp)) {
        return;
      }

      // URLから取得したデータをCollectionにModelをaddしていく
      _.each(resp, function(model) {
        c.add(new App.Models.Sample(model));
      });
    }
  }
);

まぁ概要としてはコメントで書いてるのでそれで問題無いとは思うんですが

Backbone.Collection.syncの第1引数に関してはBackbone.syncが使われる模様げなので、それは http://backbonejs.org/#Sync を参照した方が早いかも。んで指定される物によってリクエストされる方式などが異なる模様

Backbone.Modelに突っ込んでみる Backbone.jsを始めてみる