ExtJsのコントローラとビューを切り離す

Question

私はExtJsを勉強していて、私の将来のプロジェクトを編成する最良の方法を探しています。 私はこのアーキテクチャでは好きではない何かがあるExtJSのMVCのチュートリアルhttp://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

を開始しました： コントローラは、ビューウィジェットについて「知っている」と、このよう

this.control({ 
      'viewport > userlist':{ 
       itemdblclick:this.editUser 
      }, 
      'useredit button[action=save]':{ 
       click:this.updateUser 
      } 
     }); 

イベントリスナーを追加します私たちは大きなを始めているが、 500以上のフォームを持つプロジェクト。 私はこのような大規模なプロジェクトで有益であり、このアプローチは大きな混乱を招くでしょう。 コントローラーとビューを切り離す方法はありますか？

たとえば、GWTでは、Presenterはビューの内部情報を知らずに というMVPパターンを使用し、「表示」インターフェイスでビューとやり取りします。 Javascriptにはインターフェイスがありませんが、Extjでそれらをエミュレートする方法があるかもしれません。

私は私のコントローラは、このようなものにしたいと思います：

editButton = viewInterface.getEditButton(); 
editButton.on('click', function(btn, e, eOpts) { 
    eventBus.fireEvent(editUserEvent); 
}); 

が、それは可能ですか？

Answer 1

絶対に可能です。ビュー内にメソッドgetEditButtonを作成し、必要なものを返します。それは問題じゃない。

ただし、デカップリングビューとコントローラの2cです。私は現在かなり大きなプロジェクトに取り組んでいます。おそらくそれはあなたのものと同じ大きさではありませんが、約100以上のビュー/コントローラが必要になります。

私は親指の二つの主要な規則使用して、このプロジェクトの建築家にしてみてください。私はそれがビューまたはコントローラでのかどうか、いくつかの共通のロジックを持っている場合は

1. を - 私は、基本クラスを作成し、そこにこのロジックを動かします。後で - 私はそれを拡張して、子ビュー/コントローラが同じ機能を持つようにします。

2. ビュークラス内のアプリケーションのビジネスロジックに関連しないコードを残しておきます。たとえば、グリッドがあり、グリッド内のすべてのレコードを選択するための特別なコードを追加する必要があります。ステータスバー内のグリッド内の選択したレコードの表示 - このコードはクラスを表示するためのものです。コントローラーはこれらの「シンプルな」タスクについては何も知らず、アプリケーションのビジネスロジックにのみ焦点を当てています。

Answer 2

ビューのロジックがMVPパターンの目的を大きく凌駕しています。私はdeftjsをチェックすることをお勧めします。なぜなら、コンポーネントクエリをよりきれいにするからです。ほとんどのユーザーアクションはボタンのようなコントロール上にあるので、私はそれらにアクションを与え、ログインのようなユニークなアクションを探します。

control: { 
    submitButton: { 
     selector: 'button[action=login]', 
     listeners: {'click': 'login'} 
    } 
} 

上記の問題は、その型を参照するので、それはまだ、ビューコンポーネントにボタンをコントローラを結ぶんです。あなたはidでこれを置き換えることができますが、私はどちらかのファンではありません。この機能を実現する最善の方法は、RobotLegsなどのプロジェクトを基にしているので、ロードマップにあるより汎用的なイベントモデルを持つためにdeftjsに貢献することだと私は信じています。誰もこの機能にすぐに貢献しないなら、おそらく私はそれを刺すだろう。

ロジックをコンポーネントに追加する必要がある場合は、おそらくそのコンポーネントを拡張し、ビューとは別にテストするのが最適です。

Answer 3

私は、fireEventを使用して 'edit'のような意味のあるイベントを表示するようにしたいと思います。

コントローラはビ​​ューを認識し、ビューの「編集」イベントを監視できます。

ビュー：

this.on(this.btnEdit, 'click', function(){ this.fireEvent('edit');},this); 

コントローラー：

this.mon(this.viewInstance, 'edit', this.doEdit, this); 

この十字キーの用量は、ビューの内部を知っていません。