knockout.jsを使用してアイテムを1つ追加する方法、またはアイテムを削除する方法

Question

「アイテムを1つ追加」をクリックしてアイテムを追加し、「アイテムを1つ削除」をクリックしてアイテムを削除したい データバインドを使用する必要があります。また、コード内のPeople配列にどのように追加できますか。私を助けてください。

これは私のコードです：

<div data-bind="foreach: { data: people, as: 'person'}"> 
<!-- ko foreach: person --> 
<div class="item form-collection-group " > 
    <div class="title active"> 
     <span class="accordion-title" data-bind="text : fullName"> title </span> 
    </div> 
    <div class="content form-collection-content-holder active">    

        <label class=""> first name </label> 
        <div class="ui input"> 
         <input type="text" data-bind="textInput: lastName" > 
        </div> 
        <label class=""> lastName </label> 
        <div class="ui input"> 
         <input data-bind="textInput: firstName" type="text" > 
        </div> 
    </div> 
</div> 
<br> 
<!-- /ko --> 
</div> 
<br> 
<button>add one field</button> 
<button>remove one field</button> 

<script> 
var ViewModel = function() { 
var self = this; 
self.firstName = ko.observable(''); 
self.lastName = ko.observable(''); 
self.fullName = ko.computed(function() { 
    return self["firstName"].call() + " " + self.lastName() + " Title "; 
    }, self); 
}; 

ko.applyBindings({ 
    people: [ 
        [new ViewModel()] ,[new ViewModel()] 
      ] 
}); 

</script> 

Answer 1

ので、一般的に使用したいとしてや、観察配列されているアイテムの追加や削除するとき。 http://knockoutjs.com/documentation/observableArrays.html。あなたの追加ボタンクリックバインディングは新しい項目を配列にプッシュします。削除ボタンは配列から親removeを呼び出します。ここで働くフィドルです。 http://jsfiddle.net/LkqTU/33457/か、これが私のタラのリンクです

function person(firstName, lastName) { 
 
    var self = this; 
 
    this.firstName = ko.observable(firstName); 
 
    this.lastName = ko.observable(lastName); 
 
    this.fullName = ko.pureComputed(function() { 
 
    return self.firstName() + " " + self.lastName(); 
 
    }, this); 
 
    
 

 
} 
 

 
function model() { 
 
    var self = this; 
 
    this.firstName = ko.observable(''); 
 
    this.lastName = ko.observable(''); 
 
    this.people = ko.observableArray(); 
 
    this.add = function() { 
 
    self.people.push(new person(self.firstName(), self.lastName())); 
 
    } 
 
    this.remove = function(row) { 
 
    self.people.remove(row); 
 
    } 
 
} 
 

 
var mymodel = new model(); 
 

 
$(document).ready(function() { 
 
    ko.applyBindings(mymodel); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div data-bind="foreach: people"> 
 
    Title: 
 
    <span class="accordion-title" data-bind="text : fullName"> </span> 
 
    <button data-bind="click: $parent.remove">X</button> 
 
</div> 
 
<div> 
 
    <input data-bind="textInput: firstName" placeholder="first name" /> 
 
    <input data-bind="textInput: lastName" placeholder="last name" /> 
 
    <button data-bind="click: add">add</button> 
 
</div>