ノックアウトデータバインディングのViewModel

Question

私はこのビューました：Chromeのデバッグ中に私はその変数「データ」を見ることができるにもかかわらず、

@model Store.WebUI.Models.CartIndexViewModel 

@{ 
    ViewBag.Title = "Your Cart"; 
} 

<script type="text/javascript" src="~/Scripts/knockout-3.4.2.js"></script> 
<script type="text/javascript" src="~/Scripts/knockout.mapping-latest.js"> 
</script> 
<script type="text/javascript"> 
    var data = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model)); 
    var viewModel = ko.mapping.fromJS(data); 
    ko.applyBindings(viewModel); 
</script> 

<h2>Your cart</h2> 
<table id="cartTable" class="table"> 
    <thead> 
    <tr> 
     <th>Quantity</th> 
     <th>Item</th> 
     <th class="text-right">Price</th> 
    </tr> 
    </thead> 
    <tbody data-bind="foreach: Lines"> 
    <tr> 
     <td data-bind="text: Quantity"></td> 
     <td data-bind="text: Product.Name"></td> 
     <td data-bind="text: Product.Price"></td> 
    </tr> 
    </tbody> 
</table> 

と値が表の列に結合されていないいくつかの理由のために私のスクリプトは次のようになります。

var data = {"Cart":{"Lines":[{"Product":{"ProductId":2,"Name":"Game","Description":"Some Game","Category":"Games","Price":29.99},"Quantity":1}]},"ReturnUrl":"/Games"}; 

私は、一般的にノックアウトとjQueryに新しいですし、私は私がここで行方不明ですかを理解することはできません。

{ 
    "Cart": { 
    "Lines": [...] 
    } 
} 

注意すべきポイントはLinesがCart内であることである：

Answer 1

は、あなたのオブジェクトの構造を観察します。 KOにナビゲートする方法を教えてくれないので、画面に何も表示されません。結合

<table id="cartTable" class="table" data-bind="with: Cart"> 
    <thead> 
    <tr> 
     <th>Quantity</th> 
     <th>Item</th> 
     <th class="text-right">Price</th> 
    </tr> 
    </thead> 
    <tbody data-bind="foreach: Lines"> 
    <tr> 
     <td data-bind="text: Quantity"></td> 
     <td data-bind="text: Product.Name"></td> 
     <td data-bind="text: Product.Price"></td> 
    </tr> 
</tbody> 
</table> 

注data-bind="with: Cart"：あなたはこのような問題を解決することができます。これにより、KOはバインドコンテキストとして埋め込みCartオブジェクトを使用し、voila、Linesが有効な参照になります。

また、hereからKOマッピングプラグインをダウンロードする必要があります。またはko.mapping.fromJSへの呼び出しが失敗します。