关于javascript：淘汰表js添加到可观察数组后无法删除


knockout js cannot delete after adding to observable array

我正在尝试使用敲除js完成一些基本的添加和删除功能。

我正在使用asp mvc(基因剔除映射插件)，并返回一个简单的字符串列表作为我的viewModel

的一部分。

当前，我从服务器中获得了三个项目，并且所创建的功能使我可以删除其中的每个项目。我也可以添加一个项目。但是，如果我尝试删除在KO脚本中添加的项目，则无法删除。

完成研究和测试后，我猜我在错误地使用可观察对象。我更改了代码以传递ko.observable("")，但这没有用。我在做什么错？

负载值

Array[4]0:"test 1"1:"test 2"2:"test 3"length: 4__proto__: Array[0]

单击添加

后的

值

Array[4]0:"test 1"1:"test 2"2:"test 3"3: c()length: 4__proto__: Array[0]

ko脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    var vm = function (data) {
        var self = this;

        ko.mapping.fromJS(data, {}, self);

        this.deleteBulletPoint = function (bulletPoint) {
            self.BulletPoints.remove(bulletPoint)
        }

        this.addEmptyBulletPoint = function () {
            self.BulletPoints.push(ko.observable(""));
            console.log(self.BulletPoints())
        }
    }

HTML

1
2
3
4
5
6
7
8
9
10
11
12
    <h4>Bullet Points</h4>
   
        <!-- ko foreach: BulletPoints -->
       
           
                <input type="text" data-bind="value: $data" class="form-control">
                <span data-bind="click: $parent.deleteBulletPoint" class="input-group-addon btn">-</span>
           
       
        <!-- /ko -->
   
    <button id="btnAddDescription" data-bind="click: addEmptyBulletPoint" type="button" class="btn btn-default add_field_button col-lg-12 animate-off">Add New Bullet Point</button>

编辑

我已删除$parent，但返回了以下错误

Uncaught ReferenceError: Unable to process binding"foreach: function (){return BulletPoints }"
Message: Unable to process binding"click: function (){return deleteBulletPoint }"
Message: deleteBulletPoint is not defined

除此之外，我还可以添加新的空元素，但是当用户更改值时它们不会更新。这是因为我添加的元素不可观察吗？如果是这样，我该如何解决呢？

相关讨论

我已经添加了一个片段来说明如何使用带有可敲除的Observable Array进行添加和删除，大部分代码直接来自您的代码，因此您处于正确的Rails。

请注意，在这种情况下，绑定到方法时，由于您没有使用嵌套作用域，因此无需引用$parent。另外，添加时，您只需要传递纯文本，因为observableArray需要一个对象。

如果使用更复杂的类型，则添加对象时需要传递对象本身，并在迭代器的作用域内从该对象引用其属性，您可以在此处阅读有关它的更多信息。

希望这会有所帮助。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var vm = function (data) {
    var self = this;
   
    this.BulletPoints = ko.observableArray(["test1","test2","test3"]);

    this.deleteBulletPoint = function (bulletPoint) {
        self.BulletPoints.remove(bulletPoint)
    }

    this.addEmptyBulletPoint = function () {
        const c = self.BulletPoints().length + 1;
        self.BulletPoints.push("test"+c);
    }
}

ko.applyBindings(vm);
1
2
3
4
a {
  cursor: pointer;
  color: red;
}
1
2
3
4
5
6
7
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js">

<h4>Bullet Points <span>Add +</span></h4>

   
      <h3 data-bind="text: $data">
      Delete

相关讨论

您遇到的问题与ko.mapping处理基本类型数组的方式有关。通过设计，仅将对象中属于对象的属性映射到可观察对象，因此字符串数组将成为字符串的observableArray。它不会成为可观察字符串的observableArray。

为了从可观察项目本身的数组中添加/删除项目，您必须使BulletPoints数组成为具有字符串作为属性的对象的数组，该对象位于以下范围内：

1
data = { BulletPoints: [{value:"test1"}, {value:"test2"}] }

这是一个工作示例：jsfiddle