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之内。由于您没有告诉KO如何在那里导航，因此屏幕上不会显示任何内容。你可以解决这个问题：

Cart

请注意<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>绑定。这会导致KO使用嵌入的data-bind="with: Cart"对象作为绑定上下文，并且Cart成为有效的引用。

您还需要从here下载KO Mapping插件，否则对Lines的调用将失败。

Knockout数据绑定到viewModel

1 个答案: