Question

I am to new knockout.js.Very simple.trying to get data(via WebAPI – ajax call). Here is the view

<table>
<thead>
<tr>
<td>First Name </td>
<td>Last Name </td>
<td> Email </td>
</tr>
</thead>
<tbody data-bind="foreach:Contact">
<tr>
<td data-bind="text:FirstName"></td>
<td data-bind="text:LastName"></td>
<td data-bind="text:EmailAddress"></td>
</tr>
</tbody>
</table>

Here is my viewmodel and ajax call.Ajax call returns 3 records. FirstName,LastName and EmailAddress

<script type="text/javascript" >

    $(document).ready(function () {       
        var data = [];
        var viewModel = {
            Contact: ko.observableArray(data)
        };
   $.ajax({
            url: "http://localhost/AW/api/Person",
            type: "GET",
            dataType: "json",
            statusCode: {
                200: function (contacts) {
                    viewModel.Contact = contacts;
                }
            }
        });
        ko.applyBindings(new viewModel());
    });            
</script>

As I said API successfully reurning records, But it is not binding .May be I am doing something stupid here.

Answer 1

ko.observableArray (like ko.observable) is returning a function so you need to set its value with calling it with the new value as the argument:

200: function (contacts) {
    viewModel.Contact(contacts);
}

And because your viewModel is an object literal and not a function you need to write:

ko.applyBindings(viewModel);