UIでforeachを使用して観測可能な配列を計算する方法は？

Question

ノックアウトを使用して、ネストされた配列値を計算してフロントエンドに表示しようとしています。

ビューモデルコード以下の私のコードを見つけてください：

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プロパティにアクセスするためには、 "個人的"オブジェクトに存在しなければなりません。言い換えると、配列内のすべての単一のオブジェクトに対して定義された別個の計算されたプロパティが存在しなければなりません。あなたはそれらをループし、このようなあなたのビューモデル構築にプロパティを追加することができます。

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>

言われていること

、あなたが「プロファイルのためのクラスを作ることによって、コードをより読みやすく、管理しやすくすることができます"と"個人的 "なので、計算されたプロパティは単に個人クラスに存在する可能性があります。