0

嗨，我有这个 ajax 调用：

$.ajax({
        type: "POST",
        url: "wsCart.asmx/GetShippingRates2",
        contentType: "application/json; charset=utf-8",
        cache: false,
        data: datastring,
        dataType: "json",
        success: function (d) {
            alert(JSON.stringify(d));
            vm.shippingOptions = ko.mapping.fromJS(d);
        }
});

这是 JSON

{"d":"[
    {\"Name\":\"Fedex - Error\",\"InternalName\":\"11\",\"Picture\":null,\"Costs\":0.0,\"Delivery\":\"2013-06-21T13:48:43.8220537+02:00\",\"ExtraInfo\":null},
    {\"Name\":\"Normal shipment\",\"InternalName\":\"normal\",\"Picture\":\"/images/blank.gif\",\"Costs\":2.5,\"Delivery\":\"0001-01-01T00:00:00\",\"ExtraInfo\":null},
    {\"Name\":\"UPS - Expedited\",\"InternalName\":\"08\",\"Picture\":\"/images/ups-logo.png\",\"Costs\":122.0,\"Delivery\":\"2013-06-21T13:48:37.4170513+02:00\",\"ExtraInfo\":\"\"},
    {\"Name\":\"UPS - Saver\",\"InternalName\":\"65\",\"Picture\":\"/images/ups-logo.png\",\"Costs\":122.46,\"Delivery\":\"2013-06-08T00:00:00\",\"ExtraInfo\":\"\"}]"}

这是我的GetShippingRates2方法：

var shipOptions = new List<ShipmentRateOption>();
shipOptions.Add(staticShip);
List<ShipmentRateOption> a = shipOptions.OrderBy(p => p.Costs).ToList();
return JsonConvert.SerializeObject(a);

我的淘汰赛（viewmodel）有：

var shipOptions = [];
function ovm() {
    var self = this;
    self.shippingOptions = ko.observableArray(shipOptions);
}   
var vm = new ovm();
ko.applyBindings(vm);

ajax 调用由 jquery on click 事件触发。我必须将数组绑定到的 HTML：

<table style="width: 60%;">
    <tr data-bind="template: { foreach: shippingOptions() }">
        <td><label><input name="shipmentoptions" type="radio" data-bind="value: Name" /><span data-bind="text: Name"></span></label></td>
        <td style="text-align: right;">&euro;</td>
        <td style="text-align: center;">pic</td>
    </tr>
</table>

我发现了几个关于这个主题的 SO 问题，但不知何故，其中大多数都是 MVC。这个接近了，但不知何故并没有帮助我。我将上面提到的 JSON 作为警报，并且在调试它时遇到了麻烦，并且感觉d:json 中的 json 导致绑定出现问题。但我找不到解决方案。有人可以指出我正确的方向吗？

提前致谢！！

编辑 更改为ko.mapping.fromJS(d.d, {}, vm.shippingOptions); ，<table style="width: 60%;" data-bind="foreach: shippingOptions"> 但现在我得到：

名称未定义

4

1 回答 1

1

您的第一个问题是在您的 JSON 中，d因此您只需要调用fromJSd.d

vm.shippingOptions = ko.mapping.fromJS(d.d);

但是，这不能单独工作，因为要设置可观察的值，您需要将其作为函数调用，因此您需要编写：

vm.shippingOptions(ko.mapping.fromJS(d.d));

但是，因为fromJS将返回一个可观察数组，所以您的可观察数组最终会shippingOptions持有另一个可观察数组……这可能不是您想要的。

因此，对于最终且正确的解决方案，您需要使用不同的重载，fromJS它采用已经存在的数组并填充新数据：

ko.mapping.fromJS(d.d, {}, vm.shippingOptions);

在这种情况下，您需要()从 foreach 绑定中删除：

<tr data-bind="template: { foreach: shippingOptions }">

演示JSFiddle。

于 2013-06-07T12:13:19.790 回答