Javascript Knockoutjs：如何使添加到列表中的输入值也可见

我不确定我的措辞是否正确

我有一个observableArray，我可以从输入中添加到该数组，也可以删除列表项。但是，如果修改创建的项，则会丢失与数组的连接。如何保持与数组的绑定

HTML

创建组
添加组


去除

JS

函数ViewModel（）{
var self=这个；
self.groupItemToAdd=ko.可观察（“”）；
self.allGroupItems=ko.observearray（[]）；
self.addGroupItem=函数（）{
if（（self.groupItemToAdd（）！=“”）和&（self.allGroupItems.indexOf（self.groupItemToAdd（））<0））{
self.allGroupItems.push（self.groupItemToAdd（））；
}
self.groupItemToAdd（“”；//清除输入
}
self.removeSelectedGroupItem=函数（索引）{
//self.allGroupItems.splice（索引1）；
//log（self.allGroupItems.splice（索引，1））；
self.allGroupItems.remove（索引）；
}
}
//端视模型
应用绑定（新的ViewModel（））；

您有一个

可观察的array

。这意味着，对阵列的任何更改都将被跟踪和更新。其中的项目只是字符串。它们不是

可观察的

。从UI所做的任何更改都不会更新回视图模型。这种行为不限于字符串。如果您有一个常规javascript对象文本的

observatarray

，同样的情况也适用

从：

简单地将一个对象放入一个

可观察阵列

并不能使该对象的所有属性本身

可观察

。当然，如果您愿意，您可以使这些属性可见，但这是一个独立的选择。

observearray

只跟踪它持有的对象，并在添加或删除对象时通知侦听器

因此，您可以将具有

observable

属性的对象推送到

observable

中，而不是将字符串添加到

observableARay

。现在跟踪对

项

属性的更改。将属性设置为可观察的，这一点很重要，否则会遇到同样的问题

函数ViewModel（）{
var self=这个；
self.groupItemToAdd=ko.可观察（“”）；
self.allGroupItems=ko.observearray（[]）；
self.addGroupItem=函数（）{
if（self.groupItemToAdd（）&&！self.allGroupItems（）.some（a=>a.item（）==self.groupItemToAdd（））{
self.allGroupItems.push({
item:ko.observable（self.groupItemToAdd（））
});
}
self.groupItemToAdd（“”；//清除输入
}
self.removeSelectedGroupItem=函数（索引）{
self.allGroupItems.remove（索引）；
}
}
应用绑定（新的ViewModel（））

创建组
添加组


去除


如果答案解决了您的问题，请将其标记为。见：
<div class="group-settings-container mt-4">
<div class="row">
<div class="col-md-3">
  <h4><i class="fas fa-object-group"></i> Create Groups</h4>
</div>

<div class="col-md-6">
  <div class="input-group">
    <input type="text" class="form-control create-group-name" data-bind="value: groupItemToAdd, valueUpdate: 'afterkeydown' " placeholder="Enter group name" value="">
    <div class="input-group-append">
      <button class="btn btn-primary add-group-btn" data-bind="click: addGroupItem, enable: groupItemToAdd().length > 0" type="button"><i class="fas fa-plus"></i>
                      Add group</button>
    </div>
  </div>
</div>


<div class="create-groups-container mb-4">
  <ul class="list-group create-group-list my-2" data-bind="foreach: allGroupItems">
    <li class="list-group-item">
      <div class="input-group">
        <input type="text" class="form-control created-group-input" data-bind="value: $data">
        <div>
          <button class="btn btn-danger remove-group-item-btn" data-bind="click: $parent.removeSelectedGroupItem" type="button"><i class="fas fa-times"></i>
                        Remove</button>
        </div>
      </div>
    </li>
  </ul>
</div>
<!-- end create groups container  -->

</div>
<!-- end group settings container -->

 function ViewModel() {
 var self = this;
 self.groupItemToAdd = ko.observable("");
 self.allGroupItems = ko.observableArray([]);


 self.addGroupItem = function() {
 if ((self.groupItemToAdd() != "") &&     (self.allGroupItems.indexOf(self.groupItemToAdd()) < 0)) {
  self.allGroupItems.push(self.groupItemToAdd());
  }
  self.groupItemToAdd(""); // clear the input
 }

 self.removeSelectedGroupItem = function(index) {
 // self.allGroupItems.splice(index, 1);
// console.log(self.allGroupItems.splice(index, 1));
self.allGroupItems.remove(index);
}
}
// end ViewModel

ko.applyBindings(new ViewModel());