Knockout：用于编辑的空对象（选中）只给我“未定义的对象”。

Question

我有一个返回“玩家”列表的模型。我需要编辑播放器的功能，因此我为此实现了以下功能：

self.editPlayer = {
        personId: ko.observable(),
        firstName: ko.observable(""),
        lastName: ko.observable(""),
        address: ko.observable(""),
        postalCity: ko.observable(""),
        postalCode: ko.observable(""),
        email: ko.observable(""),
        email2: ko.observable(""),
        phone: ko.observable(""),
        phone2: ko.observable(""),
        birthday: ko.observable(""),
        // props which doesn't have a value from api call
        shirtNo: ko.observable(""),
        teamId: ko.observable("")
    }

和...

self.setEditPlayer = function (selPlayer) {
        self.editPlayer(selPlayer);
        console.log(self.editPlayer());
    }

播放器显示正确，但我确定我没有以正确的方式初始化此对象..

任何想法我在这里做错了什么？

这是完整的代码.. HTML和KNOCKOUT.JS： （永远不要在那里找到asp.net控件..它不是可以运行的btw）

$(document).ready(function() {

  var AddPlayerViewModel = function(parentVM) {

    var self = this;
    self.people = ko.observableArray([]);
    self.selectedPerson = ko.observable();
    self.personSelectChecked = ko.observable(false);

    self.personSelectChecked.subscribe(function(val) {
      if (!val) {
        self.selectedPerson(undefined);
        console.log("Just selected! : " + val.Id);
      }
    });

    self.possiblePlayers = ko.computed(function() {
      return _.reject(self.people(),
        function(person) {
          return _.some(parentVM.players(),
            function(player) {
              return player.PersonId == person.Id;
            });
        });
    });

    ko.computed(function() {
      var selected = self.selectedPerson();
      if (selected) {
        var teamPlayerUrl = 'api/User/GetPersonById/' + selected.Id;
        $.getJSON(teamPlayerUrl).done(function(data) {
          parentVM.newPlayer.personId(data.PersonId);
          parentVM.newPlayer.firstName(data.FirstName);
          parentVM.newPlayer.lastName(data.LastName);
          parentVM.newPlayer.email(data.Email);
          parentVM.newPlayer.email2(data.Email2);
          parentVM.newPlayer.birthday(data.BirthdayString);
          parentVM.newPlayer.address(data.Address);
          parentVM.newPlayer.postalCity(data.PostalCity);
          parentVM.newPlayer.postalCode(data.PostalCode);
          parentVM.newPlayer.phone(data.Phone);
          parentVM.newPlayer.phone2(data.Phone2);
          // props without value from api call
          parentVM.newPlayer.shirtNo("");
          parentVM.newPlayer.teamId(getQueryVariable("teamId"));

          //console.table(parentVM.newPlayer());

        });
      } else {
        //reset the stuff...
      }
    });

    var url = "api/User/GetAllPersons";
    $.getJSON(url)
      .done(function(data) {
        self.people(data);
        //console.table(data);
      });
  }

  var ViewModel = function() {

    var self = this;

    self.players = ko.observableArray();
    //self.editPlayer = ko.observable();
    var teamId = getQueryVariable("teamId");
    var teamPlayersUrl = 'api/User/GetTeamPlayers/' + teamId;

    self.setEditPlayer = function(selPlayer) {
      self.editPlayer(selPlayer);
      console.log(self.editPlayer());
    }

    $.getJSON(teamPlayersUrl)
      .done(function(data) {
        self.players(data);
        console.table(data);
      });

    self.removePlayer = function(player) {
      self.players.remove(player);

      var uri = 'api/User/RemoveTeamPlayer';

      $.ajax({
        url: uri,
        type: 'POST',
        data: ko.toJSON(player),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function() {
          console.log("Success!");
        },
        error: function(x, y, z) {
          console.log("x = " + x + ", y = " + y + ", z = " + z);
        }
      });

    }

    self.newPlayer = {
      personId: ko.observable(),
      firstName: ko.observable(""),
      lastName: ko.observable(""),
      address: ko.observable(""),
      postalCity: ko.observable(""),
      postalCode: ko.observable(""),
      email: ko.observable(""),
      email2: ko.observable(""),
      phone: ko.observable(""),
      phone2: ko.observable(""),
      birthday: ko.observable(""),
      // props which doesn't have a value from api call
      shirtNo: ko.observable(""),
      teamId: ko.observable("")
    }

    self.editPlayer = {
      personId: ko.observable(),
      firstName: ko.observable(""),
      lastName: ko.observable(""),
      address: ko.observable(""),
      postalCity: ko.observable(""),
      postalCode: ko.observable(""),
      email: ko.observable(""),
      email2: ko.observable(""),
      phone: ko.observable(""),
      phone2: ko.observable(""),
      birthday: ko.observable(""),
      // props which doesn't have a value from api call
      shirtNo: ko.observable(""),
      teamId: ko.observable("")
    }

    self.AddNewPlayer = function() {

      var uri = 'api/User/SaveNewPlayer';

      console.table("Saving..... " + self.newPlayer);

      $.ajax({
        url: uri,
        type: 'POST',
        data: ko.toJSON(self.newPlayer),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function(data) {
          console.log("Success! => " + data);
          self.players.push(data);
          $('#full-modal-player').modal('toggle');
        },
        error: function(x, y, z) {
          console.log("x = " + x + ", y = " + y + ", z = " + z);
        }
      });
    }

    self.addPlayerModel = new AddPlayerViewModel(self);
  }

  ko.applyBindings(new ViewModel(), document.getElementById("ko-players"));

  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return (false);
  }
});

<script src="Scripts/moment.min.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<script src="Scripts/nb.js"></script>
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>

<div id="ko-players">

  <%--modal start--%>
    <div class="modal fade" id="full-modal-player" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 999999999999">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 id="myModalLabel">Ny spiller</h4>
          </div>
          <div class="modal-body" style="height: 100% !important; max-width: 100%; height: 800px">
            <div class="row">
              <div class="col-sm-12">
                <div class="col-sm-6">

                  <div class="checkbox">
                    <label>
                                            <input type="checkbox" data-bind="checked: addPlayerModel.personSelectChecked">Velg eksisterende person?</label>
                  </div>
                </div>
                <div class="col-sm-6" style="display: none" data-bind="visible: addPlayerModel.personSelectChecked">
                  <div class="form-group">
                    <label>Velg person:</label>
                    <%--<asp:DropDownList OnSelectedIndexChanged="ddlExistingUser_OnSelectedIndexChanged" AutoPostBack="True" data-live-search="true" CssClass="selectpicker show-tick form-control btn-default" ItemType="Servicelayer.ViewModels.DisplayClubPersons" ClientIDMode="Static" ID="ddlExistingUser" runat="server" placeholder="Velg bruker" DataTextField="FullName" DataValueField="Id" />--%>
                      <select class="form-control btn-default" data-bind="
                                            options: addPlayerModel.possiblePlayers,
                                            optionsText: 'FullName',
                                            optionsCaption: 'Velg eksisterende spiller ...',
                                            value: addPlayerModel.selectedPerson,
                                            visible: addPlayerModel.personSelectChecked">
                                        </select>
                  </div>
                </div>
              </div>
            </div>
            <%--START FORM--%>
              <div style="float: left; width: 49%">
                <div class="form-group">
                  <label>Navn:</label>
                  <input type="text" data-bind="value: newPlayer.firstName" class="form-control" id="txtFornavn" placeholder="Fornavn" />
                  <div class="fis"></div>
                  <input data-bind="value: newPlayer.lastName" type="text" class="form-control" id="txtEtternavn" placeholder="Etternavn" />
                </div>
                <div class="form-group">
                  <label>Adresse:</label>
                  <input data-bind="value: newPlayer.address" type="text" class="form-control" id="txtAdresse" placeholder="Postadresse" />
                  <div class="fis"></div>
                  <div style="float: left; width: 70%">
                    <input data-bind="value: newPlayer.postalCity" type="text" class="form-control" id="txtPoststed" placeholder="Poststed" />
                  </div>
                  <div style="float: left; width: 29%">
                    <input data-bind="value: newPlayer.postalCode" type="text" class="form-control" id="txtPostnr" placeholder="Postnr" />
                  </div>
                </div>
                <br />
                <br />
                <div class="form-group">
                  <label>Drakt #:</label>
                  <input data-bind="value: newPlayer.shirtNo" type="text" class="form-control" id="txtShirtNo" placeholder="Draktnummer" />
                </div>
              </div>
              <div style="float: right; width: 49%">
                <div class="form-group">

                  <label for="txtBorn">Født:</label>
                  <div class="input-group date" id="dpBorn">
                    <input data-bind="value: newPlayer.birthday" type="text" class="form-control" id="txtBorn" />
                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                  </div>
                </div>
                <h4>Kontaktopplysninger spiller/forelder</h4>

                <div class="form-group">
                  <label>Epost adresse:</label>
                  <input data-bind="value: newPlayer.email" type="text" class="form-control" id="txtEmail" placeholder="E-post" />

                </div>
                <div class="form-group">
                  <label>Telefon:</label>
                  <input data-bind="value: newPlayer.phone" type="text" class="form-control" id="txtPhone" />
                </div>

                <h4>Kontaktperson annen forelder</h4>
                <div class="form-group">
                  <label>Epost adresse:</label>
                  <input data-bind="value: newPlayer.email2" type="text" class="form-control" id="txtEmail2" placeholder="E-post" />
                </div>
                <div class="form-group">
                  <label>Telefon:</label>
                  <input data-bind="value: newPlayer.phone2" type="text" class="form-control" id="txtPhone2" />
                </div>

              </div>
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right nopadding" style="padding-top: 10px">
                <button data-bind="click: AddNewPlayer" class="btn btn-primary" style="border: 1px solid white">Lagre</button>
              </div>
              <%--END FORM--%>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Lukk</button>
            <div class="clear:both; height:1px">&nbsp;</div>
          </div>
        </div>
      </div>
    </div>
    <%--modal end--%>


      <%--EDIT modal start--%>
        <div class="modal fade" id="full-modal-player-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 999999999999">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 id="myModalLabelEdit">Endre spiller</h4>
              </div>
              <div class="modal-body" style="height: 100% !important; max-width: 100%; height: 800px">
                <%--START FORM--%>
                  <div style="float: left; width: 49%">
                    <div class="form-group">
                      <label>Navn:</label>
                      <input type="text" data-bind="value: editPlayer.firstName" class="form-control" id="txtFornavnEdit" placeholder="Fornavn" />
                      <div class="fis"></div>
                      <input data-bind="value: editPlayer.lastName" type="text" class="form-control" id="txtEtternavnEdit" placeholder="Etternavn" />
                    </div>
                    <div class="form-group">
                      <label>Adresse:</label>
                      <input data-bind="value: editPlayer.address" type="text" class="form-control" id="txtAdresseEdit" placeholder="Postadresse" />
                      <div class="fis"></div>
                      <div style="float: left; width: 70%">
                        <input data-bind="value: editPlayer.postalCity" type="text" class="form-control" id="txtPoststedEdit" placeholder="Poststed" />
                      </div>
                      <div style="float: left; width: 29%">
                        <input data-bind="value: editPlayer.postalCode" type="text" class="form-control" id="txtPostnrEdit" placeholder="Postnr" />
                      </div>
                    </div>
                    <br />
                    <br />
                    <div class="form-group">
                      <label>Drakt #:</label>
                      <input data-bind="value: editPlayer.shirtNo" type="text" class="form-control" id="txtShirtNoEdit" placeholder="Draktnummer" />
                    </div>
                  </div>
                  <div style="float: right; width: 49%">
                    <div class="form-group">

                      <label for="txtBorn">Født:</label>
                      <div class="input-group date" id="dpBornEdit">
                        <input data-bind="value: editPlayer.birthday" type="text" class="form-control" id="txtBornEdit" />
                        <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                      </div>
                    </div>
                    <h4>Kontaktopplysninger spiller/forelder</h4>

                    <div class="form-group">
                      <label>Epost adresse:</label>
                      <input data-bind="value: editPlayer.email" type="text" class="form-control" id="txtEmailEdit" placeholder="E-post" />

                    </div>
                    <div class="form-group">
                      <label>Telefon:</label>
                      <input data-bind="value: editPlayer.phone" type="text" class="form-control" id="txtPhoneEdit" />
                    </div>

                    <h4>Kontaktperson annen forelder</h4>
                    <div class="form-group">
                      <label>Epost adresse:</label>
                      <input data-bind="value: editPlayer.email2" type="text" class="form-control" id="txtEmail2Edit" placeholder="E-post" />
                    </div>
                    <div class="form-group">
                      <label>Telefon:</label>
                      <input data-bind="value: editPlayer.phone2" type="text" class="form-control" id="txtPhone2Edit" />
                    </div>

                  </div>
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right nopadding" style="padding-top: 10px">
                    <button class="btn btn-primary" style="border: 1px solid white">Lagre</button>
                    <%--data-bind="click: UpdatePlayer" --%>
                  </div>
                  <%--END FORM--%>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Lukk</button>
                <div class="clear:both; height:1px">&nbsp;</div>
              </div>
            </div>
          </div>
        </div>
        <%--EDIT modal end--%>

          <div class="pagemenu white" style="margin-top: 15px">
            <div class="input-group" style="float: left">
              <div style="float: left; margin-top: 5px">
                <p style="color: #666">Gå til: &nbsp;</p>
              </div>
              <div style="float: left">
                <asp:DropDownList runat="server" CssClass="form-control" Style="height: 30px;" ID="ddlSubMenu" OnSelectedIndexChanged="ddlSubMenu_OnSelectedIndexChanged" AutoPostBack="True" />
              </div>
            </div>
          </div>

          <div class="clear10"></div>

          <div class="pagemenu">
            <a data-toggle="modal" data-target="#full-modal-player" class="item" id="lnkNewPlayer">Ny spiller</a>
          </div>

          <div style="clear: both; height: 1px; width: 100%">&nbsp;</div>
          <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
              <div class="player-card-container" data-bind="foreach: players">
                <div class="player-card">
                  <div class="player-actions">
                    <%--<button class="btn-xs btn btn-danger" ="if (!confirm('Er du sikker at du ønsker å fjerne spilleren?')) return false;">--%>
                      <button class="btn-xs btn btn-danger" style="float: left">
                            <span aria-hidden="true" class="glyphicon glyphicon-remove" data-bind="click: $parent.removePlayer"></span>
                        </button>
                      <button data-toggle="modal" data-target="#full-modal-player-edit" data-bind="click: $parent.setEditPlayer" class="btn-xs btn btn-info" style="float: left">
                            <span aria-hidden="true" class="glyphicon glyphicon-edit"></span>
                        </button>
                  </div>
                  <div class="player-card-left">
                    <div class="player-avatar">
                      <img src="Content/Images/player-female.png" id="imgAvatar" runat="server" />
                      <div class="player-shirt-no" data-bind="text: ShirtNo"></div>
                    </div>
                  </div>
                  <div class="player-card-right">
                    <div class="player-text">
                      <div class="player-card-header">
                        <p style="height: 30px">
                          <!--ko text: FullName-->
                          <!--/ko-->
                        </p>
                        <p>
                          <!--ko text: BirthdayString-->
                          <!--/ko-->
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="player-card-subtext">
                    <p>
                      <!--ko text: FullAddress-->
                      <!--/ko-->
                      <br />
                      <!--ko text: Email-->
                      <!--/ko-->
                      <br />
                      <!--ko text: Phone-->
                      <!--/ko-->
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
</div>
<script type="text/javascript">
  $(function() {
    $('#dpBorn').datetimepicker({
      locale: 'nb',
      //use24hours: true,
      format: 'DD.MM.YYYY'
    });
  });
</script>

<script src="PageScripts/ViewTeamPlayers.aspx.js"></script>

Answer 1

首先，self.editPlayer不是函数。因此，您无法执行此操作self.editPlayer(selPlayer);。

如果您尝试做的是能够选择一个播放器，然后他们的信息将被显示，并且您希望能够修改该信息，那么您可以执行此操作。

＆＃13;

＆＃13;

var viewModel = function () {
  var self = this; 
  self.players = ko.observableArray([]);
  self.selectedPlayer = ko.observable();
  self.selectPlayer = function(player) {
    self.selectedPlayer(player);
  }
  self.getPlayers = function() {
    var players = [
      {
        id: 1,
        firstName: "Player1",
        lastName: "LastName1",
        email: "player1@player.com"
      },
      {
        id: 2,
        firstName: "Player2",
        lastName: "LastName2",
        email: "player2@player.com"
      },
      {
        id: 3,
        firstName: "Player3",
        lastName: "LastName3",
        email: "player3@player.com"
      },
    ];

    self.players(players);
  };
 
  self.getPlayers();
}

ko.applyBindings(new viewModel()); 

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="foreach: players">
  <div>
    <button data-bind="click: $parent.selectPlayer, text: 'Select player ' + firstName"></button>
  </div>
</div> <br/>

<div data-bind="if: selectedPlayer">
  <div data-bind="with: selectedPlayer">
    <div>
      id: <span data-bind="text: id"></span>
    </div>
    <div>
      firstName: <span data-bind="text: firstName"></span>
    </div>
    <div>
      lastName: <span data-bind="text: lastName"></span>
    </div>
    <div>
      email: <input type="text" data-bind="value: email"/>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;