1.x Model

Summary

beez.Modelは、MVCにおけるModelを担当します。

Backbone.jsのModelを基に作られているので、基本的な機能については Backbone.Model を参照してください。

beez.Model は、Backbone.Model の薄いラッパーです。Backbone.Model のすべての機能は、beez.Model で利用可能です。

beez.Model と beez.manager.model 間の連携は、beez.View と beez.manager.view 間の連携と似ています。

先に Manager や View に目を通すことをお勧めします。

beez.Model

定義

新しく MyModel を定義する際は、beez.Modelを継承します。

var MyModel = beez.Model.extend(
  'MyModel',
  {
    midx     : 'myModel',
    defaults : {
      foo      : 'foo',
      bar      : 'bar'
    },
    url: function url() {
        return _.result(this, 'urlRoot') + '/mypage';
    }
    initialize : function initialize(attrs, opts) { /* 初期化 */ },
    validate : function validate(attrs) { /* バリデーション */ }
  }
);

midx の値は、beez.manager.model のModel管理上の index として使用されます。

生成

View と同様、 Model のインスタンス生成は beez.manager.model を利用して行います。

---

beez.manager.model を通した Model のインスタンス生成例

beez.manager.model.create('/@', MyModel);

'/@' 部分は Manager が管理する JSONPath で MyModel を追加したい親のPathを指定します。

createしたModelのpathは、prefix + '/' + Model#midx となり、今回の場合、MyModel は beez.manager.model で '/@/myModel' というPathで管理されます。

取得

View と同様、 Model のインスタンス取得は beez.manager.model を利用して行います。

---

Manager で管理されている Model を取得する例

var myModel = beez.manager.model.get('/@/myModel');

Root 設定

View と同様に、 beez.manager.modelには、Root となる特別なModelが必要です。

以後、root となる Model を RootModel

RootModel は beez.managar.model が管理するModel群の最上位Modelを示します。

RootModelの定義方法自体は、上記のbeez.Modelを継承する方法と基本的には違いはありませんが、midxには必ず '@' を用いてください。

var RootModel = beez.Model.extend(
  'RootModel',
  {
    midx : '@',
    defaults : {
      foo : 'foo',
      bar : 'bar'
    },
    initialize : function initialize(attrs, opts) { /* 初期化 */ },
    validate : function validate(attrs) { /* バリデーション */ }
  }
);

rootとなるModelとしてbeez.manager.modelの管理上に置くには、特殊なrootメソッドを使用します。

---

rootメソッド記述例

beez.manager.model.root(RootModel);

値を設定

Modelに値を設定するにはsetメソッドを使用します。

var myModel = beez.manager.model.get('/@/myModel');
myModel.set('bar', 'BAR');

一度に複数の値を設定するには、

myModel.set({
  'bar' : 'BAR',
  'foo' : 'FOO'
});

の様に、実引数にObjectを渡してください。

基本的、Backbone#Model.set と同義です。

値を取得

Modelの値を取得するにはgetメソッドを使用します。

var myModel = beez.manager.model.get('/@/myModel');
var bar = myModel.get('bar');
var foo = myModel.get('foo');

基本的、Backbone#Model.get と同義です。

url()

HTTP Request URL を定義します。

url: function url() {
    return _.result(this, 'urlRoot') + '/mypage';
}

urlRootについて

urlRootは本来Modelの変数で定義されるものですが、beezでは独自機能としてurlRootの定義がされていないModelの場合、beez.config.url.api の値が自動で urlRoot に設定されるようになっています。

個別に、fatch(), save() ... などのオプションとしてurlRootを設定することも可能です。

合わせて、Backbone.js#Model-url , Backbone.js#Model-urlRoot を参照ください。

Event bind

Backbone.View には Model にイベントを bind する機能があります。

その機能を利用すれば、Model のイベントで View を変更することが可能になります。

---

Modelの変更に特定のメソッドをbindする例

var myModel = beez.manager.model.get('/@/myModel');
myModel.on('change', function onModelChange(changedInfo) {
  //something creative.
});

また、Modelは値が変更された際、'change'イベントと共に値毎に'change:bar'イベントがトリガーされます。

---

特定の値の変更のみにイベントをbindした例

var myModel = beez.manager.model.get('/@/myModel');
myModel.on('change:bar', function onModelChange(changedInfo) {
  console.log('barの値が変更されました');
});

---

Modelの変更をViewのメソッドにbindする例

var MyView = beez.View.extend(
  'MyView',
  {
    vidx    : 'myView',
    tagName : 'div',
    events  : { },
    initialize : function initialize() {
      var myModel = beez.manager.model.get('/@/myModel');
      myModel.on('change', this.onChange, this);
    },
    beforeOnce : function beforeOnce() { },
    before : function before() { },
    render : function render() { },
    after : function after() { },
    afterOnce : function afterOnce() { },
    onChange : function onChange(data) {
      console.log(data);
      //something creative.
    }
  }
);

上記のように記述すれば良いのですが、MyView インスタンスを破棄する際に myModel への bind を解除しない限り、この方法では myModel に MyView インスタンスが紐付いたままになってしまいます。

beez.manager.model.remove() とbeez.Model.dispose() を、適切に使用することにより on であっても正常に破棄する仕組みはありますが、できるだけ listenTo を利用するスタイルを推奨します。

これを避けるためには、 on ではなく listenTo を使用します。

---

listenTo の使用例

var MyView = beez.View.extend(
  'MyView',
  {
    vidx    : 'myView',
    tagName : 'div',
    events  : { },
    initialize : function initialize() {
      var myModel = beez.manager.model.get('/@/myModel');
      //myModel.on('change', this.onChange, this);
      this.listenTo(myModel, 'change', this.onChange);
    },
    beforeOnce : function beforeOnce() { },
    before : function before() { },
    render : function render() { },
    after : function after() { },
    afterOnce : function afterOnce() { },
    onChange : function onChange(data) {
      console.log(data);
      //something creative.
    }
  }
);

この様にすれば、bindに関する情報がMyViewインスタンスに保持され、viewが破棄されたタイミングで自動的にイベントがunbindされます。

より詳しい情報は、Backbone.Event - listenToを参照してください。