🦴

Backbone.jsってなんだっけ

に公開
JavaScript
backborn
tech

概要

Jeremy Ashkenas氏が作成したjsのフレームワーク。動作が軽量でシンプルな記述方法。

特徴

依存関係

Backbone.jsは「jQuery」と「underscore.js」に依存している。依存しているとは、Backboneに元から用意されているメソッドはunderscore.jsやjQueryを使って書かれているため、先に上記2点を読み込まないと動作しない

設計思想

MVCに基づく。MVCはModel, View, Controllerといった役割に処理を分けることで、保守性と可読性を高める設計思想

メリット

  • 保守性高く記述できる
    • 処理部分と表示部分を分けて記述できるので、コードがごちゃつかない
  • 効率的に開発ができる
    • プログラム全体を一定のルールに従って管理ができるため、もろもろ考える手間が省ける

Modelってなに？

概要

MVCモデルのMにあたる。Backbone.jsにおけるModelとは「データを保持する構成要素」のこと。
サーバーと通信してあれこれしたデータを保持したり管理したりする。
また、getやsetを使ったり、バリデーションしたり、といったデータ管理もおこなう。
DOMを直接操作しない

使い方

var SampleModel = Backbone.Model.extend({
    initialize: function(attrs, options) {
        defaults: {
           text: "default text"; // デフォルト値を設定
        }
    },
    validate: function(attrs) {
        if(attrs.text.length >= 1){
            console.log('文字が入力されてます'); // バリデーションを実施
        }
    },
    method: function(){
        console.log('this.text: ', this.get('text')); // getでデータ取得
    }
});

var sampleModel = new SampleModel({text: 'sample text'});
sampleModel.isValid(); // 結果: 文字が入力されてます
sampleModel.method(); // 結果: sample text
sampleModel.set({text: 'sample text2'}); // textプロパティに値をセット
sampleModel.method(); // 結果: sample text2

Viewってなに？

概要

MVCモデルのVにあたる部分。画面表示の処理をおこなう。ユーザーアクションに対してModelのデータを更新するイベント処理も担当する。

使い方

// viewではセクションのHTMLを表示する
var sampleView = Backbone.View.extend({
    el: $('.main'),
    tagName: 'span',
    className: 'foo',

    //  初期設定
    initialize: function (options) {
        // インスタンス生成時に呼ばれる
    },

    render: function () {
        this.$el.html($('#template1').html());
        return this; // お決まりの処理
    }

});

var SampleView = new sampleView();
SampleView.render();

// 先にオブジェクトを作って、インタンス生成時に値を渡すこともできる
var SampleView2 = Backbone.View.extend({});
sampleView2 = new SampleView2({el: $(".mail")});

// event
// jsと同じようにイベントをセットすることができる
var SampleEvents = Backbone.View.extend({
    el: '.main',
    events:{
        'click .js-click-like' : 'clickBtn',
    },
    clickBtn: function(){
        console.log('ボタンがクリックされました');
    }
});
var sampleEvents = new SampleEvents();

Collectionの作り方

概要

使い方

Templateの使い方

概要

Templateはunderscore.jsのメソッドを用いることで使える便利ツール。
使い回しが簡単にできるようになる。

使い方

## js
$(function () {
    var TemplateSample = Backbone.View.extend({
        el: $('#app'),
        initialize: function () {
            this.render();
        },
        render: function () {
            var compiled = _.template($('#template2').html());
            $(this.el).html(compiled({name: 'napa', text: 'compiled text'}));
        }
    });
    new TemplateSample();

});


## html
div class="main">
    <!-- Template -->
    <div class="templateSection" id="app">
    </div>
    <script type="text/template" id="template2">
        <span class="name"><%= name %></span>
        <span class="text"><%= text %></span>
    </script>
</div>

今回の例で言うと、id名:template2のセクションの中身をまるっとid:appの中に値を渡した上で挿入してる。

ModelとViewの連携方法

結論、Viewをインスタンス化するときに、インスタンス化したモデルを渡すだけ。
プラス、画面に対してあれこれするときに、this.modelとして、モデルを介してイベントを発火させるだけ。

//modelを作成
var LikeModel = Backbone.Model.extend({
    // デフォルト値を設定
    defaults: {
        name: 'default name',
        text: 'default text',
        like: 10
    },
    // インスタンス生成時の処理を記l
    initialize: function (attrs, options) {
        console.log('attrs: ', attrs);
        console.log('options: ', options);
    },
    // バリデーション
    validate: function (attrs) {
        if (attrs.text.length === 0) {
            return '入力されていません';
        }
    },
    method: function () {
    }
});
var likeModel = new LikeModel({name: 'napa', text: 'this is text', like: 0});

// Viewを作成
var LikeView = Backbone.View.extend({
    events: {
        "click .js-click-like": "countUp",
    },
    initialize: function () {
        _.bindAll(this, 'render');
        // Viewの中で自動的に「this.model」というオブジェクトが作られている
        // Modelには色々なメソッドが入っている
        // 今回はModelに入っている値に何かしらの変化があったらthis.renderを呼び出してる
        this.model.bind("change", this.render);
        this.render();
    },
    countUp: function () {
        this.model.set({like: this.model.get('like') + 1});
        console.log(this.model.get('like'));
    },
    render: function () {
        var compiled = _.template($('#template_btn').html());
        $(this.el).html(compiled({
            name: this.model.get('name'),
            text: this.model.get('text'),
            like: this.model.get('like')
        }));
    }
});

new LikeView({el: $('#app'), model: likeModel});

Discussion