Add dynamic element in an array using knockout

Question

I am trying to add elements in an observableArray but here I have problem that newly added element replace last elements.

var bugTracker = function() {
  var self = this;
  self.bugName = ko.observable(''),
    self.bugList = ko.observableArray([
      {name:"Abc",age:27},{name:"Dooo",age:27},{name:"Usss",age:27},{name:"Yeess",age:27}
    ])
  self.addBug = function() {
    var newBug = {
      name: self.bugName,
      age: 86
    }
    self.bugList.push({
      name: self.bugName,
      age: 89
    });
  }
  self.removeBug = function() {
    self.bugList.remove(this);
  }
}
bugTracker.bugList
$(function() {
  ko.applyBindings(new bugTracker());
});

HTML:

<input type="text" data-bind="value : bugName" >
<input type="button" data-bind="click: addBug" value="Add Bug"/>
<ol data-bind="foreach : bugList">
    <li data-bind="text : name" >
    </li>
</ol>

Output :

Jeroen · Accepted Answer · 2016-02-10 07:40:04Z

1

You need to invoke bugName as a function to get the current value, and you can discard the double creation of newBug, so:

self.addBug = function() {
  var newBug = {
    name: self.bugName(),
    age: 86
  }
  self.bugList.push(newBug);
}

See this working jsfiddle.

answered Feb 10, 2016 at 7:40

Jeroen

64.4k47 gold badges231 silver badges372 bronze badges

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

Collectives™ on Stack Overflow

Add dynamic element in an array using knockout

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