knockout - Issue in adding user input to table

Question

This is my html code

<tbody data-bind="foreach: awards">
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: email"></td>
        <td data-bind="text: phone"></td>
        <td data-bind="text: address"></td>
        <td ><input type="button"  class="btn btn-success pull-centre"   value="Update!" /></td>
        <td ><input type="button"  class="btn btn-success pull-centre"   value="Delete!" /></td>

    </tr>
</tbody>


<form class="well form-inline" id="myform"  >  
          <div class="form-group">
              <label><b>Form</b></label> 
          </div> 
          <div class="form-group">
              <input type="text" data-bind="value:newName" class="span4" placeholder="Name" id="n" >  
              </div>
              <br>
              <div class="form-group">
              <input type="text" data-bind="value:phone" class="span4" placeholder="Phone Number" id="p">  
              </div> 
              <br>
              <div class="form-group">
              <input type="text" class="span4" data-bind="value:email"  placeholder="Email" id="e">  
              </div>
              <br>
              <div class="form-group">
              <input type="text" class="span4" placeholder="Address" data-bind="value:adrs"  id="a">  
              </div>

         <br>
            <button type="button" class="btn" data-bind="click: showMe">Find</button>
              </div> 

            </form>  

this is the javascript + ko bindings

function komodel() {
    var self = this;
    self.newName = ko.observable();
    self.phone = ko.observable();
    self.email = ko.observable();
    self.adrs = ko.observable();


    self.awards = ko.observableArray([{
        name: "sohaib",
        phone: "03009496301",
        email: "has@yahoo.com",
        address: "faisal town"
    }, {
        name: "pappu",
        phone: "45609496301",
        email: "asdhas@yahoo.com",
        address: "asdasd jinga lala faisal town"
    }]);



    self.showMe = function() {
        self.awards.push({
            name: self.newName,
            phone: self.phone,
            email: self.email,
            address: self.adrs
        });

    }
}

The problem is that although through the new rows are added to the table though form , but when a new row is added, the previous one is over written by it. How do I overcome it ?

Answer 1

In your code when you add new item your pushing observable objects not it's value. So as you continue adding new items which are tied to that observable objects you pushed previously, the old values are overwriten.

So change your showMe function to be push the value of your observable objects:

self.showMe = function() {
    self.awards.push({
        name: self.newName(),
        phone: self.phone(),
        email: self.email(),
        address: self.adrs()
    });

}

JsFiddle Demo