嵌套 JSON 数组和 Knockout observableArray

Question

我需要将此 JSON 数组绑定到我的 ViewModel。没有错误，只是数据没有绑定。

[
    [
        {
            "FlightID": "565",
            "FlightNumber": "731",
            "CityFromID": "1",
            "CityFromCode": "MOW",
            "CityToID": "19",
            "CityToCode": "BCN",
            "AirportFromCode": "DME",
            "AirportFromName": null,
            "AirportToCode": "BCN",
            "AirportToName": null,
            "DepartureDate": "20150320",
            "DepartureTime": "17:00",
            "ArrivalDate": "20150320",
            "ArrivalTime": "21:00",
            "Price": "350",
            "Currency": "€",
            "AirServiceID": "89",
            "AirCraft": "Boeing",
            "AirlineName": "TRANSAERO",
            "AirlineCode": "UN",
            "PackageID": "232",
            "CityFromName": "Москва",
            "CityToName": "Барселона",
            "TariffName": null,
            "FinalPrice": 700
        },
        {
            "FlightID": "566",
            "FlightNumber": "732",
            "CityFromID": "19",
            "CityFromCode": null,
            "CityToID": "1",
            "CityToCode": null,
            "AirportFromCode": "BCN",
            "AirportFromName": null,
            "AirportToCode": "DME",
            "AirportToName": null,
            "DepartureDate": "20150321",
            "DepartureTime": "07:00",
            "ArrivalDate": "20150321",
            "ArrivalTime": "11:00",
            "Price": "350",
            "Currency": "€",
            "AirServiceID": "89",
            "AirCraft": "Boeing",
            "AirlineName": "TRANSAERO",
            "AirlineCode": "UN",
            "PackageID": "232",
            "CityFromName": "Барселона",
            "CityToName": "Москва",
            "TariffName": null,
            "FinalPrice": 700
        }
    ],
    [
        {
            "FlightID": "563",
            "FlightNumber": "2639",
            "CityFromID": "1",
            "CityFromCode": "MOW",
            "CityToID": "19",
            "CityToCode": "BCN",
            "AirportFromCode": "SVO",
            "AirportFromName": null,
            "AirportToCode": "BCN",
            "AirportToName": null,
            "DepartureDate": "20150320",
            "DepartureTime": "11:50",
            "ArrivalDate": "20150320",
            "ArrivalTime": "19:15",
            "Price": "350",
            "Currency": "€",
            "AirServiceID": "89",
            "AirCraft": "Boeing",
            "AirlineName": "Aeroflot-Russian International AirLines",
            "AirlineCode": "SU",
            "PackageID": "232",
            "CityFromName": "Москва",
            "CityToName": "Барселона",
            "TariffName": null,
            "FinalPrice": 700
        },
        {
            "FlightID": "564",
            "FlightNumber": "2640",
            "CityFromID": "19",
            "CityFromCode": null,
            "CityToID": "1",
            "CityToCode": null,
            "AirportFromCode": "BCN",
            "AirportFromName": null,
            "AirportToCode": "SVO",
            "AirportToName": null,
            "DepartureDate": "20150321",
            "DepartureTime": "11:50",
            "ArrivalDate": "20150321",
            "ArrivalTime": "14:50",
            "Price": "350",
            "Currency": "€",
            "AirServiceID": "89",
            "AirCraft": "Boeing",
            "AirlineName": "Aeroflot-Russian International AirLines",
            "AirlineCode": "SU",
            "PackageID": "232",
            "CityFromName": "Барселона",
            "CityToName": "Москва",
            "TariffName": null,
            "FinalPrice": 700
        }
    ]
]

我是这样称呼的：

self.getprices = function () {
            $.ajax({
                url: "@Url.Content("~/Home/GetFlights")",
                data: $("form").serialize(),
                type: "post",
                cache: false,
                dataType: "json"
            })
                .done(function (result) {
                    if (result === "Запрос не вернул результатов.") {
                        $("#errlbl").hide();
                        $("#errormsg").text(result);
                        $("#modalerror").modal();
                    } else {
                        self.prices(ko.toJSON(result));
                        ko.mapping.fromJS(result, {}, self.prices());
                    }
                })
                .fail(function (xhr, ajaxOptions, thrownError) {
                    console.log(xhr.responseText);
                });
        };

这是标记：

<div class="row" id="searchresult">
            <div class="col-md-6" id="flightsfrom">
                <table class="table table-striped">
                    <tbody data-bind="foreach: flightsfrom">
                        <tr>
                            <td data-bind="text: ko.utils.unwrapObservable($data.CityFromName) + ' ' + ko.utils.unwrapObservable($data.AirportFromCode) + ' - ' + ko.utils.unwrapObservable($data.CityToName) + ' ' + ko.utils.unwrapObservable($data.AirportToCode)"></td>
                        </tr>
                        <tr>
                            <td data-bind="text: 'Вылет: ' + ko.utils.unwrapObservable($data.DepartureTime) + ' Прилет: ' + ko.utils.unwrapObservable($data.ArrivalTime)"></td>
                        </tr>
                        <tr>
                            <td data-bind="text: ko.utils.unwrapObservable($data.AirlineName)"></td>
                        </tr>
                    <tr>
                        <td data-bind="text: ko.utils.unwrapObservable($data.AirlineCode) + ' ' + ko.utils.unwrapObservable($data.FlightNumber)+ '. Тип ВС: ' + ko.utils.unwrapObservable($data.AirCraft)"></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" data-bind="value: 'Купить за : ' + ko.utils.unwrapObservable($data.FinalPrice) + ' ' + ko.utils.unwrapObservable($data.Currency), click: $root.bookflight.bind($data, $data.AirlineCode)" class="btn btn-warning" name="booking" />
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-6" id="flightsto">
                <table class="table table-striped">
                    <tbody data-bind="foreach: flightsto">
                        <tr>
                            <td data-bind="text: ko.utils.unwrapObservable($data.CityFromName) + ' ' + ko.utils.unwrapObservable($data.AirportFromCode) + ' - ' + ko.utils.unwrapObservable($data.CityToName) + ' ' + ko.utils.unwrapObservable($data.AirportToCode)"></td>
                        </tr>
                        <tr>
                            <td data-bind="text: 'Вылет: ' + ko.utils.unwrapObservable($data.DepartureTime) + ' Прилет: ' + ko.utils.unwrapObservable($data.ArrivalTime)"></td>
                        </tr>
                        <tr>
                            <td data-bind="text: ko.utils.unwrapObservable($data.AirlineName)"></td>
                        </tr>
                    <tr>
                        <td data-bind="text: ko.utils.unwrapObservable($data.AirlineCode) + ' ' + ko.utils.unwrapObservable($data.FlightNumber)+ '. Тип ВС: ' + ko.utils.unwrapObservable($data.AirCraft)"></td>
                    </tr>
                    <tr>
                        <td>
                            <h1></h1>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

我真的不知道如何让所有部分一起工作。

Answer 1

一些事情...

ko.mapping.fromJS() 期待一个 javascript 文字响应对象，而你实际上得到一个 json 对象。来自 Knockout documentation:

If your Ajax call returns a JSON string (and does not deserialize it into a JavaScript object), then you can use the function ko.mapping.fromJSON to create and update your view model instead. To unmap, you can use ko.mapping.toJSON.

所以您的 ajax 回调应该如下所示：

ko.mapping.fromJSON(response, self.prices());

而不是：

self.prices(ko.toJSON(result));
ko.mapping.fromJS(result, {}, self.prices());

此外，由于您尚未发布 KO ViewModel，因此无法判断您的 JSON attribute-value 对和视图模型 property-value 对是否正确相等的。这也可能导致问题。

最后，您能否确认 ajax 的 .done() 方法正在被调用？

嵌套 JSON 数组和 Knockout observableArray

Nested JSON arrays and Knockout observableArray

javascript

json

knockout.js