淘汰賽數據綁定到視圖模型

Question

我有這樣的看法：

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

，由於某種原因值不綁定表中的列，即使在Chrome的調試過程中，我可以看到變量「數據」中我的腳本看起來像這樣：

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

我是新來敲除和jQuery一般，我不明白我在這裏失蹤。

Answer 1

觀察你的對象結構：

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

要注意的一點是，Lines是內Cart。既然你不告訴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對象作爲綁定上下文，並且瞧，Lines成爲有效的引用。

您還需要從here下載KO Mapping插件或撥打ko.mapping.fromJS將失敗。