観測可能なデータを観測可能な配列にプッシュノックアウト

Question

私はfirstnameとlastnameを計算し、同じ配列のデータをプッシュしようとすると、複数のデータ（firstnameとlastname）をプッシュしようとしています。エラー。以下は私のコードです。

のViewModel：

var viewModel = function() { 

    var self = this; 

    self.gameofthrones = ko.observableArray ([ 
    {firstname: 'Jon', lastname: 'Snow'}, 
    {firstname: 'Robb', lastname: 'Stark'} 
    ]); 

    self.firstname = ko.observable(''); 
    self.lastname = ko.observable(''); 
    for (var i=0; i<self.gameofthrones().length; i++) { 
    self.gameofthrones()[i].fullname = ko.computed (function() { 
     return self.gameofthrones()[i].firstname+" "+self.gameofthrones()[i].lastname; 
    }) 
    }; 

    $('#classic').click(function() { 
    self.gameofthrones.push(
     {firstname: $('#fn').val(), lastname: $('#pr').val()} 
    ); 
    }); 
} 
ko.applyBindings(new viewModel()); 

HTMLビュー：

<form class="" action="index.html" method="post"> 
    <input type="text" name="name" data-bind="value: firstname" id="fn"> 
    <input type="text" name="name" data-bind="value: lastname" id="pr"> 
    <button id="classic" type="button" name="Submit">Submit</button> 
</form> 

<div data-bind="foreach: gameofthrones"> 
    Firstname: <span data-bind="text: firstname"></span><br> 
    LastName: <span data-bind="text: lastname"></span><br> 
    Fullname: <span data-bind="text: fullname"></span><br><br> 
</div> 

私はノックアウトJSに新しいですし、この時点で立ち往生していますが、観察、アレイ内の計算された、姓と名を表示するが方法です。 事前にお手数をおかけしていただきありがとうございます。

Answer 1

gameofthrone配列の各オブジェクトにfullname計算関数を追加すると、デフォルトでは新しいオブジェクトを配列にプッシュするときに同じことをする必要があります。

これを達成する方法はたくさんありますが、もっとも簡単なのは、gameofthroneの観測可能な配列の外部に完全な名前を取得する関数を作成することです。次に、$parentを使用してforeach内からその関数を呼び出します。

var viewModel = function() { 
 
    var self = this; 
 
    self.gameofthrones = ko.observableArray ([ 
 
    {firstname: 'Jon', lastname: 'Snow'}, 
 
    {firstname: 'Robb', lastname: 'Stark'} 
 
    ]); 
 
    self.getFullName = function(name){ 
 
    return name.firstname + " " + name.lastname; 
 
    } 
 
} 
 
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.2.0/knockout-min.js"></script> 
 

 
<div data-bind="foreach: gameofthrones"> 
 
    Firstname: <span data-bind="text: firstname"></span><br> 
 
    LastName: <span data-bind="text: lastname"></span><br> 
 
    Fullname: <span data-bind="text: $parent.getFullName($data) "></span><br><br> 
 
</div>