Model

今回は Model の話です。

Backbone に置ける Model は、純粋にデータストアの役割と、クライアントのデータとサーバのデータの同期処理が主な仕事です。細かい事を書き出すとたくさんの機能があるんですが、幸い、僕が勉強を始めた時には先駆者の解説があったので、そちらを参照してもらえば事足りるかと思います。

中でも、前回もリンクを貼っており、今回はその 2 ですが、試して学ぶ Backbone.js入門2 は非常に分かりやすく、持っている機能と使い方を解説されています。お世話になりました。

他にも、Model の事を知る為に、色々見ました。

クライアントのみの Model 機能

クライアントとしてだけで、Model を使用する場合、実は非常に考える事が少ないです。何故なら、どんなデータをキーバリューで持つかを考えるだけに尽きるからです。

例えば、今回は、YouTube の動画を検索する事を目的にしていますので、データとして、動画のタイトルと、その動画 ID を管理する必要があります。ちなみに、通常、Backbone.js を利用する場合は、Backbone.Model (Collection, View) 等に extend メソッドがついているので、このメソッドによって継承を行います。CoffeeScript とか、TypeScript を利用している場合は、そちらの継承の機能を利用するので問題ありません。

下記リンク先でそれぞれ見る事ができますが、言語機能による継承で問題ない事がわかります。

Backbone は、基本的にオブジェクトを extend の引数として渡します。
そして、そのオブジェクト内の指定のキーを読んで動作します。

下記例で行くと、initialize というメソッドを定義していますが、これは Ruby と同じく、オブジェクト生成時に最初に実行されるメソッドです。また、defaults というキーが存在しますがコレは、initialize より先に実行されます。このあたりは地味ですが、じわじわ効いてくるので、注意が必要です。

var Movie = Backbone.Model.extend({
    defaults: {
        title: '',
        videoId: ''
    },
    initialize: function() {
        ... 何か処理 ...
    }
});

Model だけじゃなくて Collection でも出来る機能

Model、Collection の両方に用意されている機能の話です。fetch とか parse とかです。
Collection については、また今度やります。

fetch と parse の二つは非常に関連性が強いので、セットで覚えるとすんなり頭に入るかと思います。
取りあえずサンプルです。

var Movie = Backbone.Model.extend({
  defaults: {
    ytver: ""
  },
  url: "http://gdata.youtube.com/feeds/api/videos?q=surfing&caption&v=2&alt=jsonc",
  parse: function(res) {
    return { ytver: res.apiVersion };
  }
});

var testMovie = new Movie();
testMovie.fetch({
  success: function(model) {
    console.log("ytversion: "+ model.get("ytver"));
  },
  error: function() {
    console.log("testMovie.fetch Error");
  }
});

このサンプルでは、YouTube の feed を取得するようにしています。Backbone は JSON でデータを受け取る必要があるため、クエリの設定は alt=jsonc にしています。ですが、この API はバージョンが古く、正規では ver 3 で、3 は JSON 形式に変更 (旧 API では XML) されているので、特に考える程の内容でもないです。現状のサンプルでは API キーや、登録の煩雑さ、面倒臭さ回避の為に旧バージョンを使っています。

ここでは、新しく、url、parse、fetch、success、error、get といったパラメータやメソッドが出てきました。一つずつ見ていくと、url は fetch によって取得する url の事です。fetch は Model の状態に依存しますが、特に指定が無い場合はオブジェクトに設定されている url を HTTP GET します。parse は、fetch を行い、受信したデータ (JSON) を Model に登録する前に呼び出されます。その際に、parse メソッドに引数を指定する事で受信したデータを調理する事が可能になります。オブジェクトを return する事で、目当てのデータを保存する事が出来ます。
今回では、apiVersion を受信データの中から選んで、保存しています。

また、success、error は、fetch の結果が成功したかどうかを判定する為のものです。成功した場合は success、失敗したら error を実行します。
最後に、model.get は、対キーに対応するバリューを返してくれます。Model の時は。

この辺りの機能は Collection にも同様のモノがある為 (というか、同じ)、役割分担を意識する必要がありそうです。実行結果も確認してみてください (見なくても分かりますが)。

それでは、割と長文になってきたので、次にまわします。