backboneの基礎の基礎 第2回[サーバからデータ取得]

今回はサーバサイドからデータを取得します。

前回から変更があるのはTeamCollection.jsとTeamAboutView.jsの2ファイル。

まずはまとまったデータを取得するTeamCollection.js。

var app = app || {};

app.TeamCollection = Backbone.Collection.extend ({
    url : '/xxxxx/xxxxx'
});

urlプロパティを追加します。
collectionのfetchを行うとデータを取得するのですが、このurlにリクエストを送ります。

サーバからのレスポンスとして下記のJSONデータをもらう。

[
    {
        'name' : '山田太朗',
        'birthday' : ''1981年3月1日',
        'position' : 'ゴレイロ'
    },
    {
        'name' : '山田次郎',
        'birthday' : ''1981年4月1日',
        'position' : 'フィクソ'
    }

]

次はTeamAboutView.js。

前回はべた書きしていたメンバーのプロフィール情報をサーバサイドからもらうので、
そのように変更。

var app = app || {};

app.TeamAboutView = Backbone.View.extend ({
    el : '#about',

    aboutTemplate : _.template($('#about-template').html()),

    collection : '',

    initialize : function() {
        // 通常データはRESTでサーバサイドから取得するが、
        // 今は固定の値を入れる。
        this.collection = new app.TeamCollection();

        // データを取得する。
        this.collection.fetch();

        // データ取得後に、画面を描画する。
        this.listenTo(this.collection, 'sync' , this.render);
    },

    render : function() {
        var that = this;

        // コレクションに入っているデータ件数分、メンバーを表示する。
        this.collection.each(function(model){
            that.$el.append(that.aboutTemplate(model.toJSON()));
        });
    },
});

collectionのfetchを使うとデータを取得します。(urlに対してリクエストを発生)
そして、listenToメソッドでsyncイベントを監視して、画面を描画(this.render)します。
どーいう事かというと、listenToはbackboneのメソッドでイベントを監視するメソッド。
collectionに対して追加や削除を監視したり、modelの値が変更されたりなどいろいろなメソッドを監視する際に使用します。
そして、今回監視対象としているsyncイベントは正しくデータを取得(同期)した際に発生するイベントです。

正常にデータを取得できたら、renderメソッドで取得したメンバープロフィール分、ぐるぐる回して出力しております。

これでサーバサイドからデータを取得し、そのデータで画面描画します。

簡単だーと思うと思いますが、慣れるまで結構何度もはまりました。。。

こんな感じで書いちゃう事がおおく

        // データを取得する。
        this.collection.fetch();

        // データ取得後に、画面を描画する。
        this.render();

画面に何も出ん！！！なんでやー！！といらいらします。
console.logでthis.collectionを出力するとちゃんとjsonデータが出力されるのに！！となり、ますますいらいらするという負のスパイラル。

javascriptは基本非同期なので(fetchメソッドもそう)、サーバからの応答は待ちません！
リクエストを発生した時点で次のthis.render()にうつり、まだデータを取得していない状態のcollectionをぐるぐる回そうとし、
この時点では0件なので画面に描画されない。。。
console.logで出力するとオブジェクトは最後の値が出力されるのか？？(仕様なのか？？)、サーバからの取得したデータが出力されちゃいます。

普通に考えれば当たり前なんですが、わりとはまります。。。何度も。

まぁ、簡単ですが以上で、サーバサイドからデータを取得し、それを描画するサンプルです。
ソースはここにあります(クライアント側のみ)
動かす場合は、サーバサイドはjsonデータを返却するものを作成し(githubのサーバからJSONレスポンス.json参照)、TeamCollection.jsのurlを変更して下さい。

それでは。
次回以降もbackboneの基本的な事を書く予定。その後はタイトルとそれるけどrequire.jsやmarionette.jsも書いていこーと思っとります。、