9

私は新しいプロジェクトを開始していて、新しいKnockoutJS + Web Apiを利用したいと思っています。私は、Web Apiをよく理解していますが、現時点ではKnockoutを理解するのは困難です。

これは、アプリをどのように機能させたいかについての私の最初の考えです。

  • 私は次のような標準のMVCコントローラーを持っていますLeadsController
  • LeadsControllerがActionと呼ばれListLeadsますが、これは実際にはデータを返しませんが、Knockoutからのデータを表示するためのテンプレートを含むビューを返すだけです。
  • ビューはajaxを介しListLeadsてAPIコントローラーを呼び出し、表示するリードのリストを取得しますLeadsApiController
  • 次に、リードデータがKnockoutJs ViewModelにマップされます（サーバー側からJavaScriptビューモデルにビューモデルを複製したくない）
  • HTMLページをJavaScriptでいっぱいにするのではなく、できるだけ外部のJavaScriptファイルを使用したいと思います。

私は多くの例を見てきましたが、それらのほとんどは、ajax呼び出しではなく、最初のページの読み込み時にいくつかの初期データを返します。

だから私の質問は、ajaxから取得したときにKnockout用のJavaScript viewModelをどのように作成するかということです。ここで、ajaxurlはを使用して作成されUrl.Content()ます。

また、このViewModelで追加の計算値が必要な場合、サーバー側からマップされたビューモデルを拡張するにはどうすればよいですか。

私が自分自身をうまく説明していない場合は、あなたがよくわからないことを私に知らせてください、そして私は私の質問をより明確にするために更新しようとします。

4

2 に答える 2

5

あなたのデザインはいい考えだと思います。実際、私は今まさにこのデザインを使用してアプリケーションを開発しています！

ページに初期データを埋め込む必要はありません。代わりに、ページが読み込まれたときに、空のビューモデルを作成し、を呼び出しko.applyBindingsてから、AJAX呼び出しを開始します。これにより、ビューモデルが完了するとデータが入力されます。

$(function () {
    var viewModel = {
        leads: ko.observableArray([]) // empty array for now
    };

    ko.applyBindings(viewModel);

    $.getJSON("/api/Leads", function (data) {
        var newLeads = ko.mapping.fromJS(data)(); // convert to view model objects
        viewModel.leads(newLeads); // replace the empty array with a populated one
    });
});

AJAX呼び出しが完了するまで、ページのどこかに「読み込み中」メッセージを配置することをお勧めします。

「/api/ Leads」URLを生成するには、次を使用しますUrl.RouteUrl。

<script>
    var apiUrl = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "Leads" })';
</script>

（これは、Global.asaxまたはApp_Start \ RouteConfig.csで構成されたAPIルートの名前が「DefaultApi」であると想定しています。）

ノックアウトマッピングプラグインは、AJAXJSONの結果をノックアウトビューモデルに変換するために上記で使用されています。デフォルトでは、生成されたビューモデルには、JSONのプロパティごとに1つの監視可能なプロパティがあります。計算されたプロパティを追加するなど、これをカスタマイズするには、ノックアウトマッピングプラグインの「create」コールバックを使用します。

私のアプリケーションでこれまでに到達した後、必要なプロパティや各プロパティでの検証など、クライアント側のコードで利用できるサーバー側のビューモデルからのメタデータがもっと必要であることがわかりました。ノックアウトマッピングの「作成」コールバックでは、ビューモデルで追加のプロパティと計算されたオブザーバブルを自動的に生成するために、この情報が必要でした。そのため、サーバー側では、いくつかのMVCフレームワーククラスとリフレクションを使用して、ビューモデルを検査し、関連するビューに埋め込まれるJavaScriptとしていくつかのメタデータを生成しました。クライアント側には、ノックアウトマッピングコールバックをフックし、ページで提供されるメタデータに従ってビューモデルを生成する外部JavaScriptファイルがあります。私のアドバイスは、ノックアウトビューモデルのカスタマイズとその他のJavaScriptを各ビューで手動で作成することから始め、次にリファクタリングしながら、汎用JavaScript関数を外部ファイルに移動することです。各ビューは、そのビューに固有の最小限のJavaScriptのみで終わる必要があります。その時点で、サーバー側のビューモデルアノテーションからそのJavaScriptを生成するためのC＃を作成することを検討できます。

于 2012-08-17T12:09:00.640 に答える
1

URL の問題については、これを使用するファイルの前にある _Layout.cshtml に追加します。

<script>
    window._appRootUrl = '@Url.Content("~/")';
</script>

次に、 を使用してwindow._appRootUrl、文字列連結または URI.js などの JavaScript ライブラリを使用して URL を作成できます。

追加の計算値については、ノックアウト計算オブザーバブルを使用することをお勧めします。それが不可能な場合、または .Net で行いたい場合は、getter のみを使用してプロパティを作成できるはずですが、クライアントの他のプロパティに依存している場合、クライアントの他のプロパティを更新しても更新されません。

于 2012-08-17T02:43:23.733 に答える