How to add and remove items from a list using Knockout JS?

Question

I am trying to learn knockout and I am following these two tutorials:
Tutorial 1
Best Example

But after half a day of trying (and failing), I cannot add or remove an item.
Here is my violin .

Any help would be greatly appreciated!

To clarify
Why self.items.push()does not add a new item to my list? Is it because of the property self.item_id?

My HTML looks like this:

<input type="hidden" value="" data-bind="value: item_id" />
<input class="form-control" type="search" data-bind="value: item_name" />     
<button class="btn" data-bind="click: addItem, enable: item_name().length > 2">Add</button>

<ul data-bind="foreach: items">     
  // This list is retrieved from database on page load
  <li class="list-group-item">
    <span id="123" data-bind="text: item_name, attr: {'id': item_id}">Americanino</span>
    <span data-bind="click: $parent.removeItem"></span>
  </li>      

  <li class="list-group-item">
    <span id="842" data-bind="text: item_name, attr: {'id': item_id}">Diesel</span>
    <span data-bind="click: $parent.removeItem"></span>
  </li>          
</ul> 

And my JS looks like this:

function item(id, name){
    var self = this;
    self.item_id = ko.observable(id);
    self.item_name = ko.observable(name);    
    //test
    alert(self.item_id() + ' - ' + self.item_name());    
}

var manageListModel = function() {
    var self = this;
    self.items = ko.observableArray();
    self.item_id = ko.observable('345');
    self.item_name = ko.observable();

    self.addItem = function() {     
        if (self.item_name() != "") {      
            self.items.push(new item(self.item_id(),self.item_name()));
            self.item_name(""); 
        }
    }.bind(self); 

    // Remove item
    self.removeItem = function(item) {
        alert('tert');
        self.items.remove(item);
    }
};

ko.applyBindings(new manageListModel());

UPDATE

So, after a few headshots in the wall, I finally found a solution that works very well. Hope this code helps others with similar problems :)

So what have I done?

• . 10 ko.observableArray(), 10 . 10 .

• , ko.observableArray()

• , ko.observableArray

:
( )

HTML:

<input type="hidden" value="" data-bind="value: item_id" />
<input class="form-control" type="search" data-bind="value: item_name" />     
<button class="btn" data-bind="click: addItem, enable: function(){item_name().length > 2}">Add</button>

<ul data-bind="template: { name: 'item-item-template', data: $root.items}">     
  // This list is retrieved from database on page load
  <li class="list-group-item">
    <span id="123" data-bind="text: item_name, attr: {'id': item_id}">Americanino</span>
    <span data-bind="click: $parent.removeItem"></span>
  </li>      

  <li class="list-group-item">
    <span id="842" data-bind="text: item_name, attr: {'id': item_id}">Diesel</span>
    <span data-bind="click: $parent.removeItem"></span>
  </li>          
</ul> 

<script type="text/html" id="item-item-template">
<!--ko foreach: $data-->
    <li>
      <span id="" data-bind="text: item_name, attr: {'id': item_id}"></span>
      <a href="#" class="remove el-icon-remove-circle" data-bind="click: $root.removeitem"></a>
    </li>
<!-- /ko -->
</script>

JS

// List item
function brand(name, id) {
    var self = this;
    self.item_name = ko.observable(name);
    self.item_id = ko.observable(id);
}


// Create array of existing list
function create_list(exiting_list){
    var arr_list = [];

    $(exiting_list).find('li').each(function(e,li){
        var id = $(li).find('span').prop('id');
        var name = $(li).find('span').html();
        arr_list.push({
                 item_id: id,
                 item_name: name
             });
     });
    return arr_list;
}

// Manage list
// Fiddle: http://jsfiddle.net/spstieng/THJE3/46/
var manageitemListModel = function() {
    var self = this;

    // Data
    var exiting_list = $('.item-list ul').clone();
    self.items = ko.observableArray(create_list(exiting_list));
    self.item_name = ko.observable('');
    self.item_id = ko.observable('');

    // Operations
    self.additem = function() {
        if (self.item_name() != "") {
            self.items.push(new item(self.item_name(),self.item_id()));
            self.item_name("");
        }
    }.bind(self);

    // Remove item
    self.removeitem = function(item) {
        self.items.remove(item);
    }
};

ko.applyBindings(new manageitemListModel());

Answer 1

F12 , item_name().length > 2

• self.item_name = ko.observable("");
• ( )

self.enableToAdd = ko.computed(function(){
    return self.item_name().length >2;
});

<button class="btn" data-bind="click: addItem, enable:enableToAdd">Add</button>

: ,

Answer 2

"" , . , . HTML

<div class="wrapper">

  <div class="input-group">
    <input type="hidden" value="" data-bind="value: item_id" />
    <input class="form-control" type="search" data-bind="value: item_name" />     

    <span class="input-group-btn">
      <button class="btn" data-bind="click: addItem, enable: item_name() ? item_name().length > 2 : false">Add</button>
    </span>
  </div>

  <ul class="list-group" data-bind="foreach: items">

    <li class="list-group-item">
      <span data-bind="text: item_name, attr: {'id': item_id}"></span>
      <span class="glyphicon glyphicon-remove-circle" data-bind="click: $parent.removeItem"></span>
    </li>      

  </ul>    

</div>