1

サーバーがクライアントに複雑なオブジェクトを送信し、目標が C# の「foreach」から KnockoutJS の「data-bind="foreach:」に移行することである場合、ショッピング カートにさまざまな情報を入力する次のコードを検討してください。

@{
    foreach (var item in GetItems(Model))
    {
    <dt>
        <input type="radio" id='mode_@(item.ID)' name="mode" value="@item.ID" />
        @item.Label - $@item.PriceToAdd
    </dt>
    <dd>
        @Html.Raw(item.Explanation) </dd>
        }
    }
}

ビューをレンダリングする前にオブジェクトを平坦化するようにサーバーのコードを調整する必要がありますか? サーバーが JSON を送信すると簡単になりますか?

フォローアップ: 質問がプラグインのマッピングに要約されることが明らかになり、mfanto の最初の回答が私をそこに導きます:

self.items = ko.mapping.fromJS(@Html.Raw(JsonConvert.SerializeObject(Model.Items)));

firebug は次の出力を表示します:

self.items = ko.mapping.fromJS([{"ID":60},{"ID":62},{"ID":63},{"ID":64},{"ID":9}]);

アイテムの 1 つ (id=9) に他の要素とは異なる要素があるため、マッパーが失敗する可能性があります。

おそらく、マッパーのより高度な使用法の1つを調査する必要がありますか?

書式設定された出力は、JsonConvert と JavaScriptSerializer によって返される値を比較します

...
self.itemsJSON = ko.mapping.fromJS(@Html.Raw(JsonConvert.SerializeObject(Model.Items)));
self.items = @Html.Raw(new JavaScriptSerializer().Serialize(Model.Items));

上記のコードが Firebug のブレークポイントにレンダリングされる場合:

self.itemsJSON = ko.mapping.fromJS([{"ID":60},{"ID":62},{"ID":63},{"ID":64},{"ID":9}]);
self.items = [  //line breaks inserted for clarity
{"Explanation":"Item1's text.","Label":"Item1's Label","MsgConfirm":null,"PriceToAdd":1255,"TaxExempt":false,"PercentToAdd":0,"SortOrder":1,"ID":60},
{"Explanation":"Item2's text.","Label":"Item2's Label","MsgConfirm":null,"PriceToAdd":1255,"TaxExempt":false,"PercentToAdd":0,"SortOrder":2,"ID":62},
{"Explanation":"Item3's text.","Label":"Item3's Label","MsgConfirm":null,"PriceToAdd":295,"TaxExempt":false,"PercentToAdd":0,"SortOrder":3,"ID":63},
{"Explanation":"Item4's text.","Label":"Item4's Label","MsgConfirm":null,"PriceToAdd":395,"TaxExempt":false,"PercentToAdd":0,"SortOrder":4,"ID":64},
{"Explanation":null,"Label":"[foo]","MsgConfirm":null,"PriceToAdd":150,"TaxExempt":false,"PercentToAdd":0,"SortOrder":99,"ID":9}
];

どうも

4

2 に答える 2

1

Knockout を使用する前に、オブジェクトを平坦化する必要はありません。ko.mapping プラグインは、監視可能なプロパティを持つビューモデルを作成し、複雑なネストされたオブジェクトを処理できます。

ASP.NET MVC モデルで使用するには、 @Html.Raw() と Json シリアライザー (この場合はJson.NET :

function AppViewModel() {
    var self = this;
    self.items = ko.mapping.fromJS(@Html.Raw(JsonConvert.SerializeObject(Model.Items)));
}

ko.applyBindings(new AppViewModel());

そこから、foreach を使用できます。

<table>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: PriceToAdd()"></td>
        </tr>
    </tbody>
</table>
于 2012-11-29T23:54:38.170 に答える
0

これでどちらの方向にも行くことができます。Razorを使用してサーバー上でレンダリングするか、ノックアウトを使用してクライアント上でレンダリングします...より基本的な質問は、どこにレンダリングするかです。ここに正しい答えも間違った答えもありません。

ノックアウトを使用する場合は、サーバーにモデルをフラット化させるだけでなく、それに対処する必要があります。Knockoutでは、データの読み取りと保存の両方にajaxリクエストが必要になります。これは、2つのソリューションが根本的に異なる点です。ソリューションの一部としてJavaScriptは見られず、そのコンポーネントがないと、koソリューションを提供することはかなり不可能です。

単にクライアント側のテンプレートエンジンとしてノックアウトを使用することを考えている場合は、jsrenderのようなものがおそらくより良い解決策です。

于 2012-11-29T23:31:44.437 に答える