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>

是的！这不起作用。 Tried Knockout文档和许多其他教程无法找到最佳解决方案。请帮我解决这个问题。提前谢谢。

Answer 1

您的绑定层次结构有3个级别：

根
- 资料
  - 个人

为了从底层（foreach:personal内）访问fullname属性，它必须驻留在＆＃34; personal＆＃34;宾语。换句话说，必须为数组中的每个单个对象定义一个单独的计算属性。您可以遍历它们并在视图模型构造中添加属性，如下所示：

＆＃13;

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());

＆＃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.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>

＆＃13;

话虽这么说，你可以通过为＆＃34; profile＆＃34;制作类来使代码更具可读性和可管理性。和＆＃34; personal＆＃34;，然后计算出的属性可以驻留在个人类上。

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

1 个答案: