Backbone入門ガイド(3):Events(イベント管理)

6.Events(イベント管理)
この章では、Backboneの内容を正式に紹介します.多くの例とコードがあります.これらのコードをページにコピーし、実行効果を確認する必要があります.
私が紹介した最初のモジュールはBackboneです.Events(イベント管理)は、他のモジュールを紹介するときに言及するので、その重要性を想像することができます.
EventsはBackboneの他のすべてのモジュールのベースクラスであり、Model、Collection、View、Router、HistoryにかかわらずEventsのメソッドが継承されています.
Eventsは他のモジュールにイベント管理に関する方法を提供し、on、off、triggerを含む.
jQueryに詳しい場合は、jQueryのbind、unbind、triggerの方法と非常に似ているため、このセクションをスキップすることができますが、それらの間にはまだ違いがあるので、お勧めしません.
たとえば、Backboneのモジュールクラス(またはサブクラス)に依存して使用する必要があるため、Eventsオブジェクトを直接インスタンス化することはできません.
 

//     Model   
var m = new Backbone.Model();

//         m        custom 
m.on('custom', function(index) {
    //            index
    alert(index);
});

//     m   custom  
for(var i = 0; i < 3; i++) {
    m.trigger('custom', i);
}

//  m   custom               
m.off('custom');

//       custom  
m.trigger('custom', i);

 
 
Modelのインスタンスを作成しました.ModelはBackboneのデータモデルクラスです.現在はEventsクラスのメソッドを継承していることを知っておく必要があります.
onメソッドによりmオブジェクトのカスタムイベントcustomにリスニング関数をバインドし,リスニング関数はパラメータindexを受信して表示する.次に、mオブジェクトのtriggerメソッドを1サイクルで呼び出してcustomイベントをトリガーします.結果は、リスニング関数がパラメータiを受信して表示されます.最後にoff法によりmオブジェクトcustomイベントにバインドされたリスニング関数を削除し、customイベントを再トリガーしようとすると、アクションは実行されません.
(この例では、モデルクラスのインスタンスを作成しました.これは、インスタンスをより簡単に見せるためだけですが、実際には直接インスタンス化ではなくモデルを継承することがよくあります)
上記の例では、Eventsのメソッドを定義できます.
 

on:オブジェクトのイベントに関数をバインドする

off:オブジェクトのイベントでバインドされているすべての関数を削除します(実際には指定した関数のみを削除したり、オブジェクトでバインドされているすべてのイベントを削除したりすることもできます.これはoffメソッドを呼び出すときに渡されるパラメータに関連しています.APIドキュメントを参照してください).

trigger:オブジェクトをトリガーするイベント

 
これはjQueryのイベントメソッドと非常に似ているように見えます(もちろん、jQueryはDOMイベントもサポートしています).次に別の例を見てみましょう.
 

//     Model   
var m = new Backbone.Model();

//         m   all   
m.on('all', function() {
    alert('all');
});
//         m        show 
m.on('show', function() {
    alert('show title');
});
//            m        show 
m.on('show', function() {
    alert('show content');
});
//         m        hide 
m.on('hide', function() {
    alert('hide');
});

//   m   show   hide  
m.trigger('show');
m.trigger('hide');

 
 
表示を実行した結果は、次のとおりです.
　　show title
　　show content
　　all
　　hide
　　all
この例では、mオブジェクトのallイベントにリスニング関数をバインドします.allはBackboneの特殊なイベントで、現在のオブジェクトが任意のイベントをトリガーした後、自動的にトリガーされます.(triggerでallイベントを直接トリガーすることもできます)
リスニング関数の呼び出し順序に注意する必要があります.allイベントは、他のイベントのリスニング関数が実行された後にトリガーされます.同じイベントで複数のリスニング関数がバインドされている場合、関数バインド時の順序で順次呼び出されます.
Backboneの内部には、オブジェクトごとに_が追加されます.callbacksプライベートプロパティ.オブジェクトにバインドされたイベントとリスニング関数のリストを記録します.Eventsクラスのon、off、triggerメソッドは、各オブジェクトの周りにあります.callbacksリストが操作されています.
(章を読むたびに、Backbone対応のソースコードを同時に閲覧したほうがいいです.これは記憶と理解を深めるのに役立ちます.参考:http://yujianshenbing.iteye.com/blog/1731340)