挖空数据绑定到视图模型

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调试期间，我可以看到脚本中的变量"data"如下所示：

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成为有效的引用。

您还需要从此处下载 KO 映射插件，否则对 ko.mapping.fromJS 的调用将失败。