使用 Knockout.js 和映射的 ASP.NET

Question

使用以下代码我遇到了一个奇怪的问题。当我单击并调用 showVacationModal 时，可以从服务器很好地检索数据并正确显示结果。如果我继续点击同一个人（id），它会继续工作。

如果我点击没有假期的其他人（例如不同的 ID），则不会显示任何内容 = OK。

问题

现在，当我再次单击第一个人时，什么都没有显示。 （在 ajax 调用中可以正常检索数据）。

有什么想法吗？

我的JS代码：

var ViewModel = function () {
        this.vacations = ko.mapping.fromJS(null);
    };

    var model = new ViewModel();


    function showVacationModal(id) {
        var model = {};
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetVacations",
            data: "{personId: '" + id + "'}",
            delay: 1,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {

                model.vacations = ko.mapping.fromJS(msg.d);
                ko.applyBindings(model);


                $('#vacationModal').modal('show')
            }
        });

    }

我的 HTML：

<table>
                <thead>
                    <tr>
                        <th>
                            First name
                        </th>
                        <th>
                            Last name
                        </th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: vacations">
                    <tr>
                        <td data-bind="text: Id">
                        </td>
                        <td data-bind="text: PersonId">
                        </td>
                        <td data-bind="text: Begin">
                        </td>
                    </tr>
                </tbody>
            </table>

Answer 1

您是否尝试过类似的方法？

function showVacationModal(id) {
    // var model = {}; no need to reset the model property
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetVacations",
        data: { personId: id }, // why wrap data in strings?
        delay: 1,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {

            //model.vacations = ko.mapping.fromJS(msg.d);
            ko.mapping.fromJS(msg.d, {}, model.vacations);
            // ko.applyBindings(model); no need to reapply bindings

            $('#vacationModal').modal('show')
        }
    });
}

更多信息请参见this ko.mapping documentation section。