관측 가능하고 계산 된 데이터를 관측 가능한 배열에 푸는 녹아웃

Question

성 및 성을 계산할 때 여러 데이터 (성 및 성)를 푸시하려고하고 있으며 동일한 배열에서 데이터를 푸시하려고합니다. 오류. 아래는 제 코드입니다.

뷰 모델 :

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 배열 외부에서 전체 이름을 가져 오는 함수를 만드는 것입니다. 그런 다음를 사용하여 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>