ASP.NET using Knockout.js and mappings

Question

Using the following code i experience a strange problem. When I click and call showVacationModal data is retrieved fine from the server and result is displayed correctly. If i keep clicking the same person(id) it continues to work.

If I click a different person (eg. different id) with no vacations nothing is showed = OK.

The problem

Now when I click the first person again nothing is displayed. (data is retrieved fine in ajax call).

Any ideas?

My JS code:

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')
            }
        });

    }

My 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>

Can you show a simplified working version using jsfiddle.net — photo_tom
– photo_tom, Commented Sep 30, 2012 at 0:12

danludwig · Accepted Answer · 2012-09-30 17:35:35Z

2

Have you tried something more like this?

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')
        }
    });
}

See this ko.mapping documentation section for more information.

edited Sep 30, 2012 at 17:35

answered Sep 30, 2012 at 15:27

danludwig

47.4k27 gold badges164 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joel Cochran Over a year ago

You hit on it in your code: I think the real problem is reissuing the bindings.

danludwig Over a year ago

@JoelCochran yes, the ko.mapping.fromJS always returned something funky when I tried it. Passing in a 2nd and 3rd parameter always did the trick for me.

Collectives™ on Stack Overflow

ASP.NET using Knockout.js and mappings

The problem

My JS code:

My HTML:

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The problem

My JS code:

My HTML:

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related