Backgridを試してみる

http://wyuenho.github.com/backgrid が気になったので使ってみた

動作概要的なのとして、Google AnalyticsからダウンロードしたCSVファイルをサーバーからJSONで吐き出して処理する(Google API Client Libraryを使えばサーバー無しでも可能だと思うけど)

んでインストールする訳だが上記のリンク先(github)からダウンロードする。で必要なのが

jquery.js
underscore.js
backbone.js
backbone-pageable.js (assetsディレクトリに入ってる)
backgrid.js
backgrid.css
backgrid-paginator.js (lib/extensionディレクトリ辺りに入ってる)
backgrid-paginator.css (上と同じ)

んまぁページング機能を使わないならソレ系のは要らないけど...

でまぁHTML側は以下みたいになる

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="/static/css/backgrid.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/backgrid-paginator.css" />
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/underscore.js"></script>
    <script type="text/javascript" src="/static/js/backbone.js"></script>
    <script type="text/javascript" src="/static/js/backbone-pageable.js"></script>
    <script type="text/javascript" src="/static/js/backgrid.js"></script>
    <script type="text/javascript" src="/static/js/backgrid-paginator.js"></script>
  </head>
  <body>
    <div id="grid"></div>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

あとはがっつりapp.jsを書くだけ。サーバー側な所は省略

var Sample = Backbone.Model.extend({});

/* Backbone.PageableCollectionを使うので今回は要らない
var Samples = Backbone.Collection.extend({
  model: Sample,
  url: "/fetch/samples"
});
*/

var Samples = Backbone.PageableCollection.extend({
  model: Sample,
  url: "/fetch/samples",
  state: {
    pageSize: 20
  },
  mode: "client" // infiniteとか色々ある模様。infiniteにした場合はurl先にクエリーがついてちょこちょこデータをロードする形式が採用できるのかも(未検証)
});

var View = Backbone.View.extend({
  el: $("#grid"),
  render: function() {
    var samples = new Samples();

    var grid = new Backgrid.Grid({
      collection: samples, // Backgridでレンダリングするコレクション(インスタンス)を指定
      columns: [
        {
          name: "id",
          label: "ID",
          cell: "integer",
          editable: false
        },
        {
          name: "count",
          label: "アクセス数",
          cell: "integer",
          editable: false
        },
        {
          name: "title",
          label: "タイトル",
          cell: "string"
        }
      ],
      footer: Backgrid.Extension.Paginator // フッターにBackgridのPaginatorを設定
    });

    this.$el.append(grid.render().$el);

    samples.fetch();
  }
});

new View().render();

な感じ。ちなみに

grid.on("rendered", function() {
  // 省略
});

な事も出来る模様。で実際に見ると

てな感じ。で曖昧な点として

mode: "infinite"した場合
editableで編集出来るデータを編集した場合にサーバーとかにsync(update)なやつとか出来ないのかっていう点