如何在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

你结合层次有三个层次：

• 根
  • 档案
    • 个人

为了从底层（在foreach:personal之内）访问全名属性，它必须驻留在“个人”对象上。换句话说，必须为数组中的每个对象定义一个单独的计算属性。在您的视图模型构造可以通过他们循环，并在属性是这样的：

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>

话虽这么说，你可以使代码更易读和管理由制作班“简介“和”个人“，然后计算出来的财产可能只存在于个人课堂上。