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

話雖這麼說，你可以使代碼更易讀和管理由製作班「簡介「和」個人「，然後計算出來的財產可能只存在於個人課堂上。