3

ビューにテーブルをレンダリングするために、Knockout.jsのチュートリアルに従おうとしています。私のコントローラーは、レコードのリストをIEnumerableタイプとして取得し、ビューに送信しています。Knockoutマッピングを機能させて、レコードをHTMLテーブルに表示しようとしています。

私のモデルは次のようになります。

public class ImportItem
{
    public string LName { get; set; }
    public string FName { get; set; }
    public string HPhone { get; set; }
    public string EMailAddress { get; set; }
    public string OtherPhone { get; set; }
}

IEnumerableをビューに渡して、LNameとFNameだけを表示する単純なテーブルを取得することさえできないようです。誰かが私が見ることができるノックアウトマッピングを使用したサンプルコードを持っていますか？

以下で解決

私のビューの上部に追加しました：

@model IEnumerable<MyProject.Models.ImportItem>
@{    
    var jsonData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
}

私のJavaScript：

$(function () {
        var viewModelJSON = ko.mapping.fromJSON('@Html.Raw(jsonData)');

        ko.applyBindings(viewModelJSON);
    });

私のhtmlバインディング、$ dataは、名前のない配列を参照するためのキーになりました。

<table>
  <thead><tr>
    <th>Last Name</th>
  </tr></thead>
  <tbody data-bind="foreach: $data">
    <tr>
      <td data-bind="text: LName"></td>
    </tr>    
  </tbody>
</table>
4

1 に答える 1

2

マッピングプラグインは、JavaScript（JSON）オブジェクトからのマッピングを目的としています。コントローラーで実行できることは、送信する必要のあるすべてのデータをJSON文字列にシリアル化し、それをビューに送信するモデルの属性として設定することです。

public class MyModel
{
    public string JsonData { get; set; }
}

データが生成されたら、シリアライザー（多くの場合、以下の例ではJson.NETを使用）を使用してデータをJSON文字列に変換できます。

model.JsonData = JsonConvert.SerializeObject(importItems);

次に、ビューで、マッピングプラグインを使用してJSONオブジェクトをマッピングし、json2.jsを使用して文字列を解析してJSONに変換できます。

<script type="text/javascript">
    var viewModel = ko.mapping.fromJS($.parseJSON('@Html.Raw(Model.JsonData)'));
    ko.applyBindings(viewModel);
</script>

または、質問と同じ方法でモデルをビューに送信IEnumerableし、JavaScriptの解析とマッピングを行う前に、（コントローラーではなく）ビューでRazorを使用してモデルをシリアル化することもできます。MVCパターンを可能な限り厳密に追跡したい場合は、これがおそらくより良い方法です。

したがって、ブロックの前に、<script>かみそりのコードのブロックを開き、シリアル化されたIEnumerableを保持する変数を宣言することができます。つまり、次のようになります。

@{
    string jsonData = JsonConvert.SerializeObject(Model);
}

次に、javascriptブロックで：

var viewModel = ko.mapping.fromJS($.parseJSON('@Html.Raw(jsonData)'));

タグをバインドする属性を知るdata-bind="foreach ..."には、JavaScriptでデバッグを行って、viewModelオブジェクトを検査し、マッピングプラグインがどのように正確にマッピングしたかを確認する必要がありますIEnumerable<ImportItems>。私はこれまで単一のモデルでこれを行っただけなので、どうなるかは本当にわかりません。

于 2012-11-22T15:33:41.390 に答える