Angular2でMVVMを適用する

Question

angular2を使用しているWebアプリケーションで作業しています。 MVVVMパターン：モデルビューViewModel、angular2では、モデルクラス、サーバー側からデータを抽出できるサービス、ビューとコンポーネントのテンプレートがあります。私はangular2プロジェクトでどのようにMVVMアーキテクチャを適切に適用できるのでしょうか？

あなたはModelオブジェクト（これはすべての擬似コードである）している典型的なMVVMパターンでは

Answer 1

：次にビューを

class MyModel { 
    public int id; 
    public string foo; 
    public int bar; 
    public date createdOn; 
} 

を持っている：

<div>{{myModelBar}}</div> 
<div>{{myModelFoo}}</div> 
<div>{{anotherModelBar}}</div> 

あなたはどのようにビューとモデルを参照ください相関関係はありませんか？このビューにはモデルの一部のプロパティが必要ですが、それらのすべてではありません。ビューには、モデルに存在しないプロパティも必要です。

class MyViewModel { 
    public string myModelFoo; 
    public int myModelBar; 
    public int anotherModelBar; 
} 

今、私たちの見解は、それが実際に使用できるモデルがあります。これは、ビューモデルの必要性の出番です。それでは、モデルからViewModelへのビューからViewへのどのような取り組みですか？コントローラーが必要です：

class Controller() { 
    var modelA = new MyModel(); 
    modelA.foo = "Foo"; 
    modelA.bar = 1; 
    var modelB = new MyModel(); 
    modelB.bar = 2; 

    var viewModel = new MyViewModel(); 
    viewModel.myModelFoo = modelA.foo; 
    viewModel.myModelBar = modelA.bar; 
    viewModel.anotherModelBar = modelB.bar; 

    // The view function here would retrieve the view and combine it with the ViewModel 
    var view = View('path_to_our_view_file', viewModel); 

    return view; 
} 

これはMVVMCパターンです。 MVVMのパターン自体は、モデル、ビュー、およびビューモデルにはビューまたはビューの構成方法に関する動作がないため、ほとんど役に立たないと言います。私がMVVMであると主張するフレームワークで見たことは、ViewModelは通常、コントローラとViewModelのマッシュアップであるか、ルーティングがないためにパターンがコントローラレスであると考えていることです。しかし、私は、ViewModelが特定のビューで動作している場合にルーティングが暗示されていると言います。

Angularがこのパターンに厳密に従わないことは明らかです。しかし、ほとんどのコンセプトは似ています。あなたはまだコントローラとビューを持っていますが、それらは単にコンポーネントの形で一緒にマッシュされています。コントローラーまでのAngular 2の興味深い点は、コントローラーへの実際のルーティングが可能で、コンポーネントに割り当てられたテンプレートタグ経由のルーティングを暗示していることです。しかし、結果は同じです。コンポーネントが呼び出されたり、ルーティングされたりするビューを取得する方法があります。多くのフレームワークと同様に、モデルレイヤーは作成するまではあなた次第です。

ここでViewModelレイヤーはどこですか？私は、Componentのすべてのパブリック変数がViewにアクセスできるので、ViewModelレイヤーはComponentクラスのプロパティであることを提案します。クライアントがサーバーに要求を行い、サーバーがビューを返さなければならない典型的なサーバー・クライアント・アプリケーションでは、すべての呼び出しで状態を再構築する必要があります。これを行うには、コントローラ - >モデル - > ViewModel - > Viewの各呼び出しでMVVMCチェインを実行する必要があります。 Angularのクライアント側アプリケーションでは、コントローラはビ​​ューの状態を保持するため、ViewModelが存在します。

したがって、問題はビューの関心をモデルの関心とどのように区別しますか？ビューでモデルを直接使用しないことには賢明でなくてはなりません。 1つの方法は、クラスとして個別のビューモデルを作成することです。

class MyComponentViewModel { 
    name: string; 
    list: Array<string>; 
} 

@Component({ 
    selector: 'my-component', 
    template: `<div>{{model.name}}</div> 
       <ul> 
       <li *ngFor="let item of (model.list | async)">{{item}}</li> 
       </ul>` 
}) 
class MyComponent { 
    model: MyComponentViewModel; 
    private propertyA: string 

    constructor(private dataService: DataService) { 
     this.model = new MyComponentViewModel(); 
     this.model.list = []; 

     let page = dataService.getCurrentPage(); 
     let children = dataService.getPageChildren(page.id).subscribe(pages => { 
      this.model.list = []; 
      for(let page of pages) { 
       this.model.list.push(page.title); 
      } 
     }) 

     this.model.name = page.title; 
    } 
} 

このコードはテストされていません。うまくいけば、あなたはポイントを得るでしょう。独自のビューモデルを作成するだけで、Componentクラスのプロパティをダーティにする代わりに、独自のクラスにビュープロパティを配置することができます。このアプローチの利点はより洗練されたものになります。コンポーネントを使用して作業を行うようになりました（パターンに固執している限り）。短所はもう少し冗長で、一部のタイプをビューモデルに適したより一般的なタイプに変換するのは難しいかもしれませんが、1つのオブジェクトにすべてのプロパティを配置するので、角度変化の検出が混乱する可能性がありますこのことはわかりません）。私にとっては、過度に冗長に見えるので、おそらくこのパターンを使用しないでしょう。