第二回 Backbone.jsのModelについて

本記事の目的

• Backbone.jsのModelを理解する

---

Modelとは

単一データを保持するためのモジュールです。

---

Modelの属性について

Model のデータは 属性 として管理します。
基本的に Model を扱う際にはこの 属性 の取得や設定を行います。

---

Modelの生成方法

もっとも簡単な Model の生成はこちら。

const exampleModel = new Backbone.Model()

この状態では属性がない Model が生成されます。
属性を設定した Model を生成する場合はコンストラクタの引数で指定します。

const exampleModel = new Backbone.Model({name: 'うる太郎', age: 30})

上記で生成したModelのイメージが下記になります。

---

属性の取得

属性の取得は get メソッドを使用します。

const exampleModel = new Backbone.Model({name: 'うる太郎', age: 30})
exampleModel.get('name') // => うる太郎
exampleModel.get('age')  // => 30

---

属性の設定

属性の設定は set メソッド使用します。

単一の場合

const exampleModel = new Backbone.Model({name: 'うる太郎', age: 30})
exampleModel.set('age', 31)
exampleModel.get('age') // => 31

複数の場合

const exampleModel = new Backbone.Model({name: 'うる太郎', age: 30})
exampleModel.set({name: 'うる', age: 31})
exampleModel.get('name') // => うる
exampleModel.get('age')  // => 31

---

Modelの初期値について

コンストラクタの引数で指定する以外にも defaults に属性の初期値を設定することで、初期値を持った Model を生成できます。

const ExampleModel = Backbone.Model.extend({
  defaults: {name: '名称', age: 0}
})
const exampleModel = new ExampleModel()
exampleModel.get('name') // => 名称
exampleModel.get('age')  // => 0

// インスタンス生成時に指定した場合はそちらが優先される
const overrideModel = new ExampleModel({age: 30})
overrideModel.get('age') // => 30

---

まとめ

• Backbone.jsのModelとは
  単一データを保持するためのモジュール
• Modelのデータは属性で管理している
• 属性の取得/設定はget/setメソッドで行う