1 プログラム1:シンプルなモデルの作成
- 1.1 コード
- 1.2 解説
- 1.3 実行結果
2 プログラム2:メンバ変数(プロパティ)の値の読み取り
- 2.1 解説
- 2.2 実行結果
3 プログラム3:メンバ変数(プロパティ)の値の書き込み
- 3.1 解説
- 3.2 実行結果

Backbone.js でシンプルなModelを作成する - JavaScript

Backbone.js でシンプルなModelを作成するコードを紹介します。

プログラム1:シンプルなモデルの作成

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="jquery-3.2.1.js"></script>
  <script src="underscore.js"></script>
  <script src="backbone.js"></script>
  <script type="text/javascript">
    $(function () {
      var MModel = Backbone.Model.extend({
        defaults: {
          name: '',
          tag: '',
          price: 0
        }
      });

      var model = new MModel({
        name: 'ペンギンクッキー',
        tag: 'PC001',
        price: 350
      });

      var json = model.toJSON();
      $('#output').html(JSON.stringify(json));
      
    });

  </script>
</head>
<body>
  <div id="output"></div>
</body>
</html>

解説

  var MModel = Backbone.Model.extend({
    defaults: {
      name: '',
      tag: '',
      price: 0
    }
  });

上記コードによりモデルのオブジェクトを定義します。今回作成するモデルには、"name","tag","price"のフィールド(プロパティ)を持たせます。

  var model = new MModel({
    name: 'ペンギンクッキー',
    tag: 'PC001',
    price: 350
  });

上記のコードにより、モデルのインスタンスを作成します。コンストラクタの引数にプロパティにセットする値を与えます。

  var json = model.toJSON();
  $('#output').html(JSON.stringify(json));

モデルに設定された情報をJSON形式で取得します。toJSON()メソッドを呼び出すことでJSON形式でモデルの情報を取り出せます。取得したJSONを id="output"のタグに表示します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。コードに記述してモデルに設定した値を含むモデルの情報がJSON形式で画面に表示できていることが確認できます。

プログラム2:メンバ変数(プロパティ)の値の読み取り

作成したモデルのプロパティの値を読み取るコードを紹介します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="jquery-3.2.1.js"></script>
  <script src="underscore.js"></script>
  <script src="backbone.js"></script>
  <script type="text/javascript">
    $(function () {
      var MModel = Backbone.Model.extend({
        defaults: {
          name: '',
          tag: '',
          price: 0
        }
      });

      var model = new MModel({
        name: 'ペンギンクッキー',
        tag: 'PC001',
        price: 350
      });

      var CView = Backbone.View.extend({
        tagName: 'input',
        id: 'button01',
        attributes: {
          type: 'button',
          value: '表示'
        },
        events: {
          'click': 'onClick'
        },
        onClick: function (event) {
          $('#output').append("name: "+model.get('name')+'<br/>');
          $('#output').append("tag: " +model.get('tag') +'<br/>');
          $('#output').append("price: " +model.get('price') +'<br/>');
        }
      });

      var mView = new CView;
      $('#ButtonFrame').append(mView.el);
    });

  </script>
</head>
<body>
 <div id="ButtonFrame"></div>
 <div id="output"></div>
</body>
</html>

解説

モデルのプロパティの値を取得するには、

(モデルのインスタンス).get('(プロパティ名)')

の記述を利用します。getメソッドの戻り値でプロパティの値が返されます。

  onClick: function (event) {
    $('#output').append("name: "+model.get('name')+'<br/>');
    $('#output').append("tag: " +model.get('tag') +'<br/>');
    $('#output').append("price: " +model.get('price') +'<br/>');
  }

上記のコードでは、modelオブジェクトの "name", "tag", "proce" プロパティの値を取得してid="output" のタグに表示します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

[表示]ボタンをクリックします。モデルに設定した値を取得して画面に表示されることが確認できます。

プログラム3:メンバ変数(プロパティ)の値の書き込み

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="jquery-3.2.1.js"></script>
  <script src="underscore.js"></script>
  <script src="backbone.js"></script>
  <script type="text/javascript">
    $(function () {
      var MModel = Backbone.Model.extend({
        defaults: {
          name: '',
          tag: '',
          price: 0
        }
      });

      var model = new MModel({
        name: 'ペンギンクッキー',
        tag: 'PC001',
        price: 350
      });

      var Button1View = Backbone.View.extend({
        tagName: 'input',
        id: 'button01',
        attributes: {
          type: 'button',
          value: '表示'
        },
        events: {
          'click': 'onClick'
        },
        onClick: function (event) {

          $('#output').append("name: " + model.get('name') + '<br/>');
          $('#output').append("tag: " +model.get('tag') +'<br/>');
          $('#output').append("price: " +model.get('price') +'<br/>');
        }
      });

      var  Button2View = Backbone.View.extend({
        tagName: 'input',
        id: 'button02',
        attributes: {
          type: 'button',
          value: 'Set'
        },
        events: {
          'click': 'onClick'
        },
        onClick: function (event) {
          model.set('name', 'くじらキャンディー');
        }
      });


      var b1View = new Button1View;
      $('#ButtonFrame').append(b1View.el);
      var b2View = new Button2View;
      $('#ButtonFrame').append(b2View.el);
    });

  </script>
</head>
<body>
 <div id="ButtonFrame"></div>
 <div id="output"></div>
</body>
</html>

解説

モデルのプロパティの値を設定するには、

(モデルのインスタンス).set('(プロパティ名)', (値))

の記述を利用します。

今回のプログラムでは、下記の[Set]ボタンをクリックするとmodel オブジェクトのnameプロパティの値を"くじらキャンディー"に変更します。

  var  Button2View = Backbone.View.extend({
    tagName: 'input',
    id: 'button02',
    attributes: {
      type: 'button',
      value: 'Set'
    },
    events: {
      'click': 'onClick'
    },
    onClick: function (event) {
      model.set('name', 'くじらキャンディー');
    }
  });