将数据推送到ko.observableArray

Question

I'm having problems getting this to work. I have a form in a partial view in which I would like to populate a select field from a ko.observableArray. In my javascript i can see my incoming data being returned via signalR but for some reason it's not being pushed to my observableArray. Here is my javascript:

var AddAthleteToRosterVm = function(user) {
var self = this;

// reference the auto-generated proxy for the hub
var teamMangHub = $.connection.teamMangHub;

// Athlete and Team arrays for select list
self.Athletes = ko.observableArray();
self.Teams = new Array();

// assign athlete data
teamMangHub.client.getAthletes = function(data) {
    // populate Athletes array
    self.Athletes.push(data); // data is not being pushed here.  Athletes array remains empty.
};

$.connection.hub.start().done(function() {

    // retrieve the athletes from the server
    teamMangHub.server.retrieveAthletes(user);

});
};

Here's my partial view:

<h3 class="text-center">Add Athlete To Roster</h3>

@using (Html.BeginForm("AddAthleteToRoster", "CoachRosterManagement", FormMethod.Post,
new {@class = "text-center", id="athleteToRosterForm"}))
{
   @Html.AntiForgeryToken()

  <fieldset class="myFormSpace">
    <legend>Athlete Info</legend>

    <p>
        @Html.LabelFor(x => x.InputAthleteToRoster.AthleteId)<br />
        <select name="InputAthleteToRoster.AthleteId" data-bind="options: Athletes, optionsText: 'FirstName', value: 'Id', optionsCaption: 'Select'"></select>
    </p>
    <p>
        @Html.LabelFor(x => x.InputAthleteToRoster.CoachesTeamId)<br />
        @Html.DropDownListFor(x => x.InputAthleteToRoster.CoachesTeamId,
        new SelectList(Enumerable.Empty<SelectListItem>()), "Select")
    </p>
    <button type="submit">Add Athlete</button>
</fieldset>
}

and this is the script that applies the binding from the view that calls partial view:

@section scripts
{

<script src="~/signalr/hubs"></script>
<script src="~/Scripts/MyScripts/AddAthleteToRoster.js"></script>
<script>
    var user = "@User.Identity.Name";


    ko.applyBindings(new AddAthleteToRosterVm(user));
</script>

}

On a side note, when I change the Athlete array from a ko.observableArray to a standard array such as:

 self.Athletes = new Array();

then the data will get pushed, but it still will not render in the select field on my partial view.

Answer 1

Your observableArray is probably not empty after pushing data ; in order to inspect it, you need to inspect the result of self.Athletes() , since the observableArray is a function (so self.Athletes itself will show as an empty array even if there are elements in it).

Assuming data is an array of objects, each representing an athlete, it's probably not binding to your select list properly because you're pushing all of your data into one array element with

self.Athletes.push(data);

Since data is an array itself, you'll want to append the elements of data like this instead:

self.Athletes.push.apply(self.Athletes, data);

(or maybe simply assign it with self.Athletes(data) , depending on your requirements).