javascript - 如何在 UI 中使用 foreach 计算可观察数组？

Question

使用 Knockout，我尝试计算嵌套数组值并将其显示在前端。请在下面找到我的代码

查看模型代码:

var viewModel = function  () {
var self = this;
self.profile = ko.observableArray ([{
  personal: [
    {firstName: 'Captain', lastName: 'Flint'},
    {firstName: 'Jhon', lastName: 'Silver'},
    {firstName: 'Jack', lastName: 'Rackham'}
  ]
}]);
self.fullName = ko.computed (function () {
  for (var i=0; i<self.profile()[0].personal.length; i++) {
    self.profile()[0].personal[i].firstName+" "+ self.profile()[0].personal[i].lastName;
  });
}
ko.applyBindings(new viewModel);

HTML

<table data-bind="foreach: profile">
  <tbody data-bind="foreach: personal">
    <tr>
      <td data-bind="text: $index"></td>
      <td data-bind="text: fullname"></td>
    </tr>
  </tbody>
</table>

是的!这是行不通的。尝试了 Knockout 文档和许多其他教程，无法找到最佳解决方案。请帮助我解决这个问题。提前致谢。

Answer 1

您的绑定(bind)层次结构有 3 个级别:

• 根
  • 简介
    • 个人

为了从底层(在 foreach:personal 内部)访问 fullname 属性，它必须驻留在“personal”对象上。换句话说，必须为数组中的每个对象定义一个单独的计算属性。您可以循环遍历它们并在 View 模型构造中添加属性，如下所示:

var viewModel = function () {
  var self = this;
  self.profile = ko.observableArray([
    { personal: [
        {firstName: 'Captain', lastName: 'Flint'},
        {firstName: 'Jhon', lastName: 'Silver'},
        {firstName: 'Jack', lastName: 'Rackham'}
    ]}
  ]);
  
  for(var i=0; i<self.profile().length; i++){
    var profile = self.profile()[i];
    for(var j=0; j<profile.personal.length; j++){
      var personal = profile.personal[j];
      personal.fullname = ko.computed(function(){
        return this.firstName + " " + this.lastName;
      }, personal);
    }
  }
  
}

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.4.2/knockout-min.js"></script>

<table data-bind="foreach: profile">
  <tbody data-bind="foreach: personal">
    <tr>
      <td data-bind="text: $index"></td>
      <td data-bind="text: fullname"></td>
    </tr>
  </tbody>
</table>

话虽如此，您可以通过为“个人资料”和“个人”创建类来使代码更具可读性和可管理性，然后计算属性可以仅驻留在个人类上。