淘汰赛将可观察和计算数据推送到可观察数组答案

【问题标题】：Knockout pushing observable and computed data to an observable array淘汰赛将可观察和计算数据推送到可观察数组
【发布时间】：2017-09-02 10:36:29
【问题描述】：

我正在尝试推送多个数据（名字和姓氏），当我计算名字和姓氏并尝试将数据推送到同一个数组中时，我会抛出一个错误。下面是我的代码。

视图模型：

var viewModel = function () {

  var self = this;

  self.gameofthrones = ko.observableArray ([
    {firstname: 'Jon', lastname: 'Snow'},
    {firstname: 'Robb', lastname: 'Stark'}
  ]);

  self.firstname = ko.observable('');
  self.lastname = ko.observable('');
  for (var i=0; i<self.gameofthrones().length; i++) {
    self.gameofthrones()[i].fullname = ko.computed (function () {
      return self.gameofthrones()[i].firstname+" "+self.gameofthrones()[i].lastname;
    })
  };

  $('#classic').click( function() {
    self.gameofthrones.push(
      {firstname: $('#fn').val(), lastname: $('#pr').val()}
    );
  });
}
ko.applyBindings(new viewModel());

HTML 视图：

<form class="" action="index.html" method="post">
  <input type="text" name="name" data-bind="value: firstname" id="fn">
  <input type="text" name="name" data-bind="value: lastname" id="pr">
  <button id="classic" type="button" name="Submit">Submit</button>
</form>

<div data-bind="foreach: gameofthrones">
  Firstname: <span data-bind="text: firstname"></span><br>
  LastName: <span data-bind="text: lastname"></span><br>
  Fullname: <span data-bind="text: fullname"></span><br><br>
</div>

我是 Knockout JS 的新手，我被困在这一点上，有没有办法在可观察数组中显示计算的名字和姓氏。提前感谢您的帮助。

【问题讨论】：

标签： javascript jquery knockout.js data-binding knockout-components

【解决方案1】：

如果你为 gameofthone 数组的每个对象添加一个全名计算函数，那么当你将一个新对象推送到数组时你需要做同样的事情，因为默认情况下它不会有一个。

有很多方法可以做到这一点，但我认为最简单的方法是创建一个函数来获取可观察的 gameofthrone 数组之外的全名。然后使用 $parent 从 foreach 内部调用该函数。

var viewModel = function () {
  var self = this;
  self.gameofthrones = ko.observableArray ([
    {firstname: 'Jon', lastname: 'Snow'},
    {firstname: 'Robb', lastname: 'Stark'}
  ]);
  self.getFullName = function(name){
    return name.firstname + " " + name.lastname;
  }
}
ko.applyBindings(new viewModel());

<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: gameofthrones">
  Firstname: <span data-bind="text: firstname"></span><br>
  LastName: <span data-bind="text: lastname"></span><br>
  Fullname: <span data-bind="text: $parent.getFullName($data) "></span><br><br>
</div>

【讨论】：