Knockout Datenbindung an Ansichtsmodell

Question

Ich habe diese Ansicht:

@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> 

und aus irgendeinem Grund Werte sind nicht auf die Tabellenspalten zu binden, obwohl während des Debug-in Chrome kann ich sehen, dass die Variable „Daten“ in mein Skript sieht wie folgt aus:

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

ich bin im allgemeinen KO und jQuery und ich kann nicht verstehen, was ich hier fehlt.

Answer 1

Beobachten Sie Ihre Objektstruktur:

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

Der Punkt ist, dass Lines innerhalb Cart ist. Da Sie KO nicht sagen, wie Sie dorthin navigieren sollen, erscheint nichts auf dem Bildschirm.

<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> 

Notiere die data-bind="with: Cart" Bindung: Sie könnten das Problem wie folgt lösen. Dies bewirkt, dass KO das eingebettete Objekt Cart als Bindungskontext verwendet, und voila, Lines, wird zu einer gültigen Referenz.

Sie müssen auch das KO Mapping-Plugin von here herunterladen oder der Anruf an ko.mapping.fromJS wird fehlschlagen.