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

Question

我正在尝试学习 Knockout，并且正在遵循这两个教程:
Tutorial 1
Better list example

但是经过半天的尝试(但失败了)，我无法添加或删除项目。
Here is my fiddle 。

任何帮助将不胜感激!

澄清
为什么 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());

更新

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

那我做了什么？

• 我为列表项创建了一个模板。如果您的列表中有 10 个项目并使用 ko.observableArray()，则模板将包含 10 个项目。因此，对于您添加的每一项，您都会在列表中获得 10 项。

• 我克隆了现有列表，因为 ko.observableArray() 删除了列表中的所有静态内容

• 循环遍历我的克隆列表，并将值数据放入我传递给 ko.observableArray

  的数组中

这是我的最终代码:
(You can see the fiddle here)

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

看看下面的version

不要忘记在您喜欢的浏览器中按 F12，您的绑定(bind)不正确 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>

这里有更多关于 Computed Observables 的信息

请注意:如果绑定(bind)有任何错误，则所有绑定(bind)都不起作用