将数据推送到ko.observableArray

Question

我很难让这件事起作用。我在部分视图中有一个表单，在其中我希望从ko.observableArray填充一个select字段。在我的javascript中，我可以看到传入的数据是通过signalR返回的，但是由于某种原因，它没有被推送到我的observableArray中。这是我的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);

});
};

以下是我的部分观点：

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

这是从调用部分视图的视图中应用绑定的脚本：

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

}

另外，当我将运动员数组从ko.observableArray更改为标准数组时，例如：

 self.Athletes = new Array();

然后数据将被推送，但它仍然不会在我的部分视图的select字段中呈现。

Answer 1

您的observableArray在按下data后可能不是空的；为了检查它，需要检查self.Athletes()的结果，因为observableArray是一个函数 (因此self.Athletes本身将显示为空数组，即使其中包含元素)。

假设data是一个对象数组，每个对象代表一个运动员，那么它可能没有正确地绑定到选择列表，因为您将所有数据都压缩到一个数组元素中

self.Athletes.push(data);

由于数据本身就是一个数组，所以您需要像下面这样追加data的元素：

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

(或者可以根据您的需求使用self.Athletes(data)分配它)。