淘汰赛数据绑定到视图模型

我有这样的看法：淘汰赛数据绑定到视图模型

@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一般，我不明白我在这里失踪。

来源

2017-06-21 Nikita Kress

观察你的对象结构：

{ 
    "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将失败。

来源

2017-06-21 09:13:09

OMG，这非常有道理！ –

等待，但不应该是viewModel.Cart？简单的数据绑定到购物车似乎没有做任何事情。有没有一种好的方法来调试视图来跟踪绑定的值？ –

它适用于我这个小提琴：https：//jsfiddle.net/rzso11jL/然而，如果我像你一样使用'ko.mapping.fromJS'，我会遇到一个错误，如控制台所示。就我个人而言，我从来没有使用过这个帮手，所以我不能加太多。 –

淘汰赛数据绑定到视图模型

回答

相关问题