knockout.js create new record with data after clicking a button

Question

I would like to fill two input fields, then "submit" them clicking a button, and have them displayed in newly created row of a table. Is something like this possible with knockout? If so, how can I achieve it?

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<a class="btn btn-primary btn-lg"  role="button"  >Add</a>

<div class="panel panel-default">
    <div class=panel-heading>Your data</div>
    <table class=table>
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

Answer 1

Use an observable array as your binding http://knockoutjs.com/documentation/observableArrays.html

Add a data binding to your link

<a class="btn btn-primary btn-lg"  role="button" data-bind="click: add()" >Add</a>

Assuming you've defined your viewmodel as vm, do the following:

add an oberservable array to your view model

vm.myarray = ko.observableArray();

Add a function to your view model

vm.add = function() {
    vm.myarray.push({firstName: firstName, lastName: lastName };

}

Add a binding to your table row

<tr data-bind="foreach: myarray">
    <th data-bind="text: firstName"></th>
    <th data-bind="text: lastName"></th>
</tr>

Answer 2

What you probably want is an observable array . It works just like the other observables you have but can contain many objects.

Combine that with the foreach binding and you've got a recipe for filling out a table.

 var AppViewModel = function() { this.firstName = ko.observable(); this.lastName = ko.observable(); this.records = ko.observableArray(); }; var model = new AppViewModel(); $('.btn').click(function() { // Create a record on click model.records.push({ firstName: model.firstName(), lastName: model.lastName() }); }); ko.applyBindings(model); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <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> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <a class="btn btn-primary btn-lg" role="button" >Add</a> <div class="panel panel-default"> <div class=panel-heading>Your data</div> <table class=table> <thead> <tr> <th>First name</th> <th>Last name</th> </tr> </thead> <tbody data-bind="foreach: records"> <tr> <td data-bind="text: firstName"></td> <td data-bind="text: lastName"></td> </tr> </tbody> </table> </div> 

If you aren't using jQuery, you can setup the click binding using normal event listeners.

document.querySelector('.btn').addEventListener('click', function() {
  model.records.push({
    firstName: model.firstName(),
    lastName: model.lastName()
  });
});

Even better than that, you can use what Denis Pitcher said and give the model a method which you apply using data-bind="click: add()" .