3

この例のような機能要件があります。

  • 「市民権」は、「南アフリカ市民」、「非南アフリカ、労働許可あり」、「非南アフリカ、労働許可なし」の3つのラジオボタンで構成されています。

  • 「労働許可番号」は15文字に制限されたフリーテキストフィールドであり、「市民」フィールドで「非南アフリカ、労働許可あり」が選択された場合にアクティブになります。

この場合は「市民権」など、他のモデルプロパティに基づいて、含まれているエディタを有効または無効にする「作業許可番号」などのフィールドエディタ用の汎用コンテナを作成したいと思います。これは、最初に取得するときに非常に簡単に実現できます。ビューモデルをレンダリングします。

ただし、ユーザーが「市民権」の値を変更するなどすると、事態は複雑になります。UIフィールドのみが変更され、モデルプロパティは変更されていませんが、「作業許可番号」が有効かどうかを決定するコンテナは、モデルプロパティに依存しています。

私はこれに対する2つの解決策しか見ていません：

  1. クライアント側（JavaScriptの可能性があります）のビューモデルを使用し、サーバー側のビューモデル、場合によってはKnockout.jsシナリオから構築します。次に、通常のフォーム送信をバイパスして、クライアント側モデル全体を一度に送信します。

  2. ユーザーが「Citizenship」値を変更したときにajax呼び出しを使用してサーバー側モデルを更新し、「Citizenship」値に依存するすべてのビューパーツを更新します。これは、「動作中」と「コミット済み」のモデルサーバー側が必要になるため、事態を複雑にします。「市民権」などの小さな変更のみを保持し、ユーザーが[保存]をクリックすると、すべての変更を「コミット済み」モデルに移動してデータストアに保持するための作業モデル。

私が何を意味するのかを理解している人のために、これを達成するために他にどのような手段を使用できますか、または上記で概説した手法をどのように改善できますか？

4

1 に答える 1

0

このシナリオは、最初に提案したソリューションで述べたように、ノックアウトを使用するクライアント側のソリューションに完全に適していると思います。ノックアウトを使用すると、この種のクライアント側のUI操作を宣言的な方法で非常に簡単に実行できます。ユーザーがフォームに入力したら、クライアント側のビューモデルオブジェクトをJSONにシリアル化し、サービスレイヤーにPOSTするだけです。

2番目に提案されたソリューションは、それほど説得力がありません。その欠点の中には次のものがあります：

  1. UIを更新するためだけにサーバーのポストバックが必要ですが、これは理想的なユーザーエクスペリエンスとは言えません。
  2. サーバードメインモデルには、機能し、コミットされたモデルが必要です。これにより、複雑さが増します。

ノックアウトとMVVMパターンを使用したクライアント側のJavaScriptビューモデルでこれを実装するためのコードは非常に簡単です。

<div data-bind = "text: name"></div>
<input type="radio" name="citizenship" value="yes" data-bind="checked: citizenship">South African Citizen<br/>
<input type="radio" name="citizenship" value="nowithoutworkpermit" data-bind="checked: citizenship">Non South African, no work permit<br />
<input type="radio" name="citizenship" value="nowithworkpermit" data-bind="checked:     citizenship">Non South African, with work permit<br />
<div id="workpermit" data-bind="visible: citizenship() === 'nowithworkpermit'">
    <input type="text" name="workpermitinumber" />Work Permit number
</div>

<script src="/Scripts/knockout-2.2.0.js" ></script>
<script>
    var MyApp = MyApp || {};
    MyApp.ViewModel = {
        citizenship: ko.observable(""),
        name: ko.observable("John")
    };
    ko.applyBindings(MyApp.ViewModel);
</script>

この例では、MyApp.ViewModelでビューモデルを作成しました。モデルには、名前と市民権の2つのプロパティがあります。「citizenship」プロパティを、ラジオボタンの「checked」プロパティと、作業許可番号のテキストボックスを表示する「visible」プロパティにデータバインドしました。

ユーザーがラジオボタンをチェックすると、ノックアウトはビューモデルの「市民権」プロパティを更新します。ビューモデルプロパティのこの変更により、ノックアウトの「可視」バインディングを介して、workpermitdivの可視cssプロパティが更新されます。ユーザーがフォームを送信する準備ができたら、MyApp.ViewModelをJSONにシリアル化して、ネットワーク経由で送信するだけです。

ノックアウトのドキュメントは傑出しており（ここを参照）、あなたが達成しようとしていることにぴったりだと思います。

于 2012-12-15T03:05:43.480 に答える