LoginSignup
19

More than 5 years have passed since last update.

backboneの基礎の基礎 第1回[サーバからデータ取得せずにローカルで動かす]

Last updated at Posted at 2015-05-16

仕事でbackbone、marionetteをやってます。
jqueryは使った事があったけど、backboneとかのMVCレベルのフレームワークは使った事なかったので、
(JavaとかではstrutsなどのMVCは経験あり)理解するのに手こずりました。
同じような人の理解に役立てれればなぁと思っております。。。

いきなりサーバサイドとの組み合わせでやるとかなり複雑になるなと感じたので、
backboneを基本から簡単に理解できるように数回にわけて書きたいと思います。

まず第1回目として、backboneの一番いいとこといっても過言でないRESTは実装せずに、
ローカルのみで、しかも超簡単な画面を通して、基本的な構成を書きます!

今回のゴールの画面はこれ
第1回ゴール画面.png

フットサルのメンバー紹介サイト。2人のメンバーの名前と生年月日、ポジションがただ表示されているだけの画面。
まぁ、これならHTMLだけで書けば誰でも書けちゃいますが、それは言わないで。
ひとまず、これをbackboneを使ってプログラムしましょう。

まず、modelを作成する。モデルはデータの集まり。今回だとメンバー。メンバーに必要な名前、生年月日、ポジションというプロパティを持っている。
modelとはプロパティとそれに関するロジックを記述するものという感じ。

下記のロジック。

MemberModel.js
var app = app || {};

app.MemberModel = Backbone.Model.extend ({
    defaults : {
        position : '', // ポジション
        name : '', // 名前
        birthday : '', // 誕生日
    },
});

modelを作成する時は、Backbone.Modelを継承する。
そうするとbackboneで用意されているいろいろな便利なメソッドが使えるようになる。 (これはまた次の話。。。)

続いてcollection。これはモデルの集合体。
下記ロジック。

TeamCollection.js
var app = app || {};

app.TeamCollection = Backbone.Collection.extend ({
});

collectionを作成する時は、Backbone.Collectionを継承する。
ひとまず、今回はこれを継承するんだ程度の理解で、次はメインのビュー。

viewは実際の画面。これが画面を描画する。
下記ロジック。

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();

        var memberModel = new app.MemberModel();
        // メンバ1
        memberModel.set('name', '山田太朗');
        memberModel.set('birthday', '1981年3月1日');
        memberModel.set('position', 'ゴレイロ');
        this.collection.add(memberModel);

        memberModel = new app.MemberModel();
        // メンバ2
        memberModel.set('name', '山田次郎');
        memberModel.set('birthday', '1981年4月1日');
        memberModel.set('position', 'フィクソ');
        this.collection.add(memberModel);

        // 画面を描画する。
        this.render();
    },

    render : function() {
        var that = this;

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

メンバ変数で重要なのは下記。
templateとはレイアウトの構成が書かれてるもの。
elは描画する際の位置。

メソッドは「initialize」がnewされたときに呼び出される。ここで初期化処理を行う。
今回はデータは取得しないので、固定で値を設定している。
renderは画面を描画する。テンプレートを使用して、メンバーmodelが2件保持しているcollectionをぐるぐる回して、
そのデータとがっちゃんこさせて、画面に表示している。

最後がこの大枠のレイアウトやjavascriptの読み込みなどをしているhtml。

layout.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>backbone.jsの超簡単サンプル</title>
    </head>
    <body>
        <!-- view表示用タグを埋め込む -->
        <div id="about"></div>

        <!-- ここは外部ライブラリの読み込み -->
        <script src="js/lib/jquery-2.1.4.min.js"></script>
        <script src="js/lib/underscore-min.js"></script>
        <script src="js/lib/backbone-min.js"></script>

        <!-- template読み込み -->
        <script type="text/template" id="about-template">
            <div>
                <div>名前: <span><%= name %></span></div>
                <div>生年月日: <span><%= birthday %></span></div>
                <div>ポジション: <span><%= position %></span></div>
            </div>
        </script>

        <!-- モデル -->
        <script src="js/MemberModel.js"></script>

        <!-- コレクション -->
        <script src="js/TeamCollection.js"></script>

        <!-- ビュー -->
        <script src="js/TeamAboutView.js"></script>

        <script>
            <!-- DOM読み込み完了後に実行 -->
            $(function() {
                // ビューを生成し、処理を開始する。
                new app.TeamAboutView();
            });
        </script>

    </body>
</html>

backboneはjqueryとunderscoreは必須のライブライなのでそれを読み込んでいる。
あとはメンバー紹介の表示templateの定義やそれを出力するタグを入れている。

作成するのはこの4ファイル。
ただメンバー2人をべたっと出すだけで、4ファイル作ります。
なんかこの例だとかなり手間な気がすると思うけど、シングルページやajax通信などをばりばりする画面などでは
威力を発揮します。

次から少しずつbackboneのその威力を感じて頂ければと思いますー。
この簡単な4ファイルですが、こちらにありますので、動かしたい場合はどーぞ。

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
19