Javascript MVC + jQueryでイベントをリスニングおよびディスパッチする

Question

jQueryを使用してイベントをリスニングおよびディスパッチする方法については、JavaScriptを学習しています。私のモデルでは

、私は変更イベントをトリガーする機能があります。

Model.prototype.setCurrentID = function(currentID) { 
    this.currentID = currentID; 
    $('body').trigger('change'); 
} 

をトリガイベントは、要素が必要ですので、私は「身体」にそれを結合しました。これは良い練習か悪い習慣ですか？私はよりよく知っているAS3で

、私は単純にモデルのインスタンスでこのイベントをリッスンし、constの値を渡して、モデルからグローバルイベントを送出します：

で

var model:Model = new Model(); 
model.addEventListener(CONST_VALUE, handlerFunction); 

jQueryのは、私のビューオブジェクト内で、私は同様にリスナーに要素を添付する必要があるので、私はもう一度「身体」にそれをバインド：

​​

それは働いているが、私は上のあなたのテイクに興味件名。

Answer 1

一般公開されていないプライベートディスパッチャを使用することをおすすめします。
は、ユーザーまたはプラグインが身体上のすべてのイベント（あなたのディスパッチャ）アンバインドした場合たとえば、あなたのロジックは失敗することがありますDOMノードを作成することによって、これを回避することができ

$('body').unbind(); 

をし、最後にそれを公開していませんユーザー（DOMに追加しないでください）：jQueryを使ってイベント・プログラミングのアプリを開発する際に留意して持っている

var dispatcher = $('<div />'); 

Model.prototype.setCurrentID = function(currentID) { 
    this.currentID = currentID; 
    dispatcher.trigger('change'); 
} 

var View = function(model, controller) { 
    this.model = model; 
    this.controller = controller; 

    dispatcher.bind('change',function(evt) { updateSomething(evt); }); 
    function updateSomething(evt){console.log('updating...')} 
} 

もう一つの良い事はjQueryのは、あなたが/トリガーのカスタムイベントをバインドすることを可能にし、また、あなたがto namespace your eventsできることです。この方法で、イベントバインディングとトリガーをより効率的に制御できます。

Model.prototype.setCurrentID = function(currentID) { 
    this.currentID = currentID; 
    dispatcher.trigger('modelIdChange.' + this.currentID); 
} 
Model.prototype.destroy = function() { 
    // unbind all the event handlers for this particular model 
    dispatcher.unbind('.'+this.currentID); 
} 

var View = function(model, controller) { 
    /*...*/ 

    // this will be triggered for all the changes 
    dispatcher.bind('modelIdChange',function(evt) { updateSomething(evt); }); 

    // this will be triggered only for the model with the id "id1" 
    dispatcher.bind('modelIdChange.id1',function(evt) { updateSomething(evt); }); 

    /*...*/ 
} 

Answer 2

私の反論は、以下のとおりです。

• 私がbroswerイベントと同じ名前を持つイベントを結合しないだろう、干渉があるかもしれません。
• モデルが1つの場合はコードは機能しますが、2つ以上のモデルがある場合は、それらを分離して同じ要素にバインド/トリガーしたくない場合があります。

方法について：

Model.prototype.bind = function(event, func) { 
    if (!this._element) this._element = $('<div>'); 
    this._element.bind(this.name+'_'+event, $.proxy(func, this)); 
    return this; 
}; 
Model.prototype.trigger = function(event) { 
    if (!this._element) this._element = $('<div>'); 
    this._element.trigger(this.name+'_'+event); 
    return this; 
}; 

あなたは両方の解決この方法です。注意イベント名にはthis.name+'_'を追加しています（各モデルには何らかの並べ替えがあり、イベントがブラウザイベントと一致しないようにしています）。ただし、プレフィックスを削除することもできます。

また、イベントハンドラ内のthisがモデルを参照するように、私はバインドで$.proxyも使用しています。

var View = function(model, controller) { 
    .... 
    model.bind('change', function() {...}); 
} 

Answer 3

さらに進んで、カスタムグローバルイベントを作成します。jQueryを使って、あなたはそうのような世界的なカスタムイベントをトリガすることができます。

$.event.trigger('change'); 

そのイベントをサブスクライブすることができ、任意の要素：

$('#myDiv').bind('change', function() { 
    console.log($(this)); 
}); 

イベントハンドラでthisキーワードがトリガーに加入してDOM要素ですイベント。