本編の内容は『Beginning Backbone.js』から翻訳され、原作者のJames Sugrue.転載は関連情報を明記してください.
 
本文の内容は前編ブログの内容に続く
 

モデルイベント

本書の後でイベントについて説明しますが、ある属性の値や属性のセットが変化するとchangeイベントがトリガーされるchangeイベントというモデルにとって非常に重要な特殊なイベントです.
 

changeイベントのリスニング

Backboneにおけるchangeイベントの傍受は,モデル全体の変化を傍受する最も簡単な方法である.イベントリスニングが使用されます.on()メソッドはBackboneオブジェクトに追加され、文字列で表されるイベントタイプとchangeイベント発生時に実行する関数参照の2つのパラメータを受け入れます.
 
このイベントのリスニングを作成する最適なタイミングは、モデルのinitialize関数です.現在のコードを変更すると、setメソッドを呼び出すたびにイベント処理関数が実行されます.

Book = Backbone.Model.extend({
    initialize: function(){
        this.on('change', function(){
            console.log('Model Changed');
        });
    },
    defaults: {
        name: 'Book Title',
        author: 'No One'
    },
    printDetails: function(){
        console.log(this.get('name') + ' by ' + this.get('author'));
    }
});

 
change:<属性名>の形式で、簡単なchangeイベントではなく、特定の属性のchangeイベントをリスニングできます.次のコードは、nameプロパティのchangeイベントのみをリスニングする別のリスニング関数を作成します.

initialize: function(){
    this.on('change', function(){
        console.log('Model Changed');
    });
    this.on('change:name', function(){
        console.log('The name attribute has changed');
    });
}

 
前に述べたように.setメソッドは、サイレント更新がトリガーされるかどうかを示すオプションのパラメータを受け入れることができ、このメソッドを使用すると、上記のchange処理関数は呼び出されません.

// （ change ）
thisBook.set('name', 'Different Book');  //change  
thisBook.set('name', 'Different Book', {silent: true});  // change 

 

何が変わったかを確かめる

Backboneには、モデル内のどの属性が変化したかを追跡するためのいくつかの属性が含まれています.グローバルなchangeリスニング関数を使用すると、発生した変化を非常に実用的に見ることができます.
 
hasChanged('<属性名>')を使用して、属性が変化しているかどうかを確認します.

this.on('change', function(){
    console.log('Model Changes Detected:');
    if(this.hasChanged('name')){
        console.log('The name has changed');
    }
    if(this.hasChanged('year')){
        console.log('The year has changed');
    }
});

 
使用するchangedプロパティは、変化するすべてのプロパティセットを取得できます.

Book = Backbone.Model.extend({
    initialize: function(){
        this.on('change', function(){
            console.log('Changed attributes: ' + JSON.stringify(this.changed));
        });
    }
});

 
使用するpreviousAttributes()メソッドはまた、すべての属性が変更される前の状態結合を得ることができる.

console.log('Previous attributes: ' + JSON.stringify(this.previousAttributes()));

 
最後に通過するprevious('<属性名>')では、特定の属性が変更される前の値を取得できます.

if(this.hasChanged('name')){
    console.log('The name has changed from ' + this.previous('name') + ’ to ' + this.get('name'));
}

 

属性変更ガイド

表3−2は、モデルにおける属性変更に関する一般的な動作を示す.
      
表3-2 Backboneモデルにおける属性変更に関する方法
操作
説明
.on('change', )
モデル内の任意の属性の変化に応答できるグローバルchangeイベントリスニングを提供
.on('change:<属性名>',)
特定のプロパティのchangeイベントをリスニングする
.hasChanged()
プロパティが前回のchangeイベントで変更された場合はtrueを返します.
.previous(<属性名>)
特定のプロパティが変更される前の値を返します.
.changed
モデル内のすべての変更されたプロパティのコレクションを返します.