jquery - knockout 数据绑定(bind)到 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>

由于某种原因，值没有绑定(bind)到表列，即使在 Chrome 中调试期间我可以看到脚本中的变量“data”如下所示:

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

总的来说，我对 knockout 和 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" 绑定(bind)。这会导致 KO 使用嵌入的 Cart 对象作为绑定(bind)上下文，瞧，Lines 成为有效引用。

您还需要从 here 下载 KO Mapping 插件否则对 ko.mapping.fromJS 的调用将会失败。