27

誰かがJavaScriptフレームワークでMVPモデルを実装できましたか？プレゼンター->サーバーコードからjavascriptへのビューインバージョンを設定する方法を理解するのに問題があります。私にはいくつかのアイデアがありますが、ちょっとハックで、他の人が何をしているのか見てみたいです。

4

10 に答える 10

48

MVP の主な目標は、コード内のさまざまな側面を分離することです。通常、JavaScript には、次の 3 つの主要な側面があります。

  1. イベント処理
  2. DOM 操作
  3. サーバー通信 (AJAX 呼び出し)

これらの懸念事項のそれぞれについて、MVP からの対応する用語があります。

  1. EventHandling = プレゼンター
  2. DOM 操作 = ビュー
  3. AJAX 呼び出し = モデル

実際、3 つの側面を実装するのは必ずしも簡単ではないため、EVENT BUS が役立つ場合があります。このバスはシングルトンである必要があり、さまざまなコンテキストで発生したすべてのイベントをバスで公開する必要があります。プレゼンターはイベントに登録し、イベントが発生したときにそれに応じて反応する必要があります。

それがどのように機能するかは次のとおりです。

最初に発生するのは、ページの読み込みです。通常のイベント モデルや jQuery など、便利なものを使用してこれを聞いてください。モデル、ビュー、プレゼンターを作成します。プレゼンターは、ビューとモデルのインスタンスを使用するため、それらを保持する必要があります。

var model = new Model();
var view = new View();
var presenter = new Presenter(model, view);

Presenter はイベント ハンドラーであるため、バスはそれを認識し、処理のためにイベントをルーティングする必要があることに注意してください。

bus.registerHandler(presenter);

最初のイベントは「init」です。これは、ページが読み込まれ、MVP オブジェクトがすべて設定されたことを意味します。

bus.init(); // call this yourself

これにより、Presenter で関数などの何かがトリガーされます。この例の presenter.onInit() では、私は on... 命名規則を好みます。これにより、UI リスナーをインストールする機会が与えられます。

// in the Presenter
onInit: function() {
  view.addSubmitListener();
  view.addWhateverListener();
  ...
}

// in the View (using jQuery)
addSubmitListener: function() {
  $("#submitButton").click(function() {
    var formData = ...
    bus.submit(formData); // publish an event to the bus
  });
}

[送信] ボタンをクリックすると、bus.submit(formData) が呼び出され、これがハンドラー -- presenter.onSubmit(formData) にルーティングされます。

// in the Presenter
onSubmit: function(formData) {
  model.postForm(formData, function(data) {
    // handle the response
    view.updateSomething(data);
  });
}

などなど...全体のトリックは、バスをプレゼンターにバインドすることであり、ループに参加します。

HTH

于 2011-05-27T13:30:11.720 に答える
6

Web ページの MVVM フレームワークであるknockout.jsを見てみましょう。モデルとビューを疎結合でリンクするための、非常に美しく、簡単に拡張可能なフレームワークを提供します。

于 2010-12-13T05:02:42.047 に答える
1

この質問は古いことは知っていますが、ここで言及する価値があると思います。私の投票はBackbone.jsに行きます。ドキュメントでさえMVCだと言っていますが、MVPだと思います。

  • VIEW = htmlテンプレート（jQuery.template）
  • MODEL = Backbone.Model
  • PRESENTER = Backbone.View（view-tempateとそれにデータをバインドする方法の間のレイヤー、および実行できるより多くのシン）、およびレンダリングメソッドのカップルビュー（htmlテンプレート）で使用するか、どちらを使用するかを切り替えるのに最適なもの。 。

そして、あなたがまだコントローラーを持っている最高のものは何ですか

  • CONTROLLER = Backbone.Controller

@JoshRiversが述べたように、nockoutJSを使用することもできますが、私の個人的な意見では、ビューテンプレートはバインディングに圧倒されています。

そして最後のメモ。Thing is View as V from MVCまたはMVPは、コーディングせずにテンプレートから構築できるものであり、優れたHTMLテンプレートパーサーを作成すれば、準備は万端です:)信じてください、コンベンションはあなたの友達です。

于 2011-11-25T21:33:35.743 に答える
1

http://angularjs.org/でangular プロジェクトを確認し、メーリング グループで質問をしてください。

jQuery とうまく連携するように設計されています。TESTABLE MVC JS アプリケーションの作成に非常に役立ちます。

于 2010-12-07T09:13:41.080 に答える
0

PureMVCを確認してください。また、JavaScript への移植も行っています。

于 2009-07-09T08:29:04.700 に答える
0

もう 1 つ、jQuery 関係者向け: http://javascriptmvc.com/

Ext JS はバージョン 4.0 以降、MV(x) パターンもサポートしていることに注意してください。ほとんどのフレームワークと同様に、それらも「MVC」と呼んでいます (JS の世界のほとんどの人がそうであるように、TodoMVPではなく TodoMVC を参照してください)。ただし、実用的な観点からは、必要に応じてパターンの C/P 部分を実装するためのツールが Ext にあります。パターンは便利ですが、独断的に扱うと思考が制限される可能性があります。

于 2009-07-09T23:38:33.353 に答える
0

Google GWT は MVP を使用しているようです:

Google GWT

于 2010-07-02T12:10:56.317 に答える
0

私たちはここで MVP について話しているのです。MVCではありません！業界はまだ MVP の準備ができていないというのが私の意見です。誰もがまだ MVC を理解しようとしています。

于 2013-03-08T04:06:14.183 に答える