剔除数据绑定到 viewModel

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 的调用将失败。