如何使用Knockout JS在列表中添加和删除项目？

Question

我正在尝试学习淘汰赛，并且正在关注以下两个教程：
教程1
更好的清单示例

但是经过半天的尝试（失败），我无法添加或删除项目。
这是我的小提琴 。

任何帮助将不胜感激！

澄清
为什么self.items.push()将新项目添加到我的列表中？ 是因为self.item_id属性吗？

我的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: 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> 

我的JS看起来像这样：

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

因此，在将我的头撞在墙上几个小时之后，我终于找到了一个效果很好的解决方案。 我希望这段代码可以帮助其他有类似问题的人:)

那我该怎么办？

• 我为列表项创建了一个模板。 如果列表中有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>