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: "[email protected]",
        address: "faisal town"
    }, {
        name: "pappu",
        phone: "45609496301",
        email: "[email protected]",
        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 ?

I added some edit, see if it makes sense now. Basically its a table whose first two rows are initially loaded through JSON object while other are added at run time through a form. — jaywalker
– jaywalker, Commented Nov 24, 2013 at 13:47
Your solution is perfect and it solvers the problem I was having. But could you please elaborate on why my previous code wasn't working whereas yours is (the only difference being you used observable's values using () ). — jaywalker
– jaywalker, Commented Nov 24, 2013 at 20:32
in your code you are pushing observable objects which are tied to your inputs. When you change the inputs again, these changes are reflected in the previously pushed observable objects. To test that remove the (), push one item then just edit the inputs and watch the table result. — ebram khalil
– ebram khalil, Commented Nov 24, 2013 at 21:07

ebram khalil · Accepted Answer · 2013-11-24 14:04:27Z

3

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

answered Nov 24, 2013 at 14:04

ebram khalil

8,3197 gold badges45 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

knockout - Issue in adding user input to table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related