Javascript 敲除js在添加到可观察数组后无法删除

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

我使用的是asp mvc，即敲除映射插件，并返回一个简单的字符串列表作为我的viewModel的一部分

目前，我从服务器上获得了三个项目，我创建的功能允许我删除其中的每个项目。我还可以添加一个项目。但是如果我试图删除我在KO脚本中添加的项目，我将无法删除它

在完成研究和一些测试后，我想我使用的可观察的是错误的。我将代码改为pass

ko.observable（“”

），但这并没有起作用。我做错了什么

负载值

数组[4]0:“测试1”1:“测试2”2:“测试3”长度：4_______:数组[0]

单击“添加”后的值

数组[4]0:“测试1”1:“测试2”2:“测试3”3:c（）长度：4__proto__;u:Array[0]

ko脚本

    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

<div class="col-lg-6 col-md-6 col-sm-12">
    <h4>Bullet Points</h4>
    <div id="oneLinedescriptions" class="input_fields_wrap">
        <!-- ko foreach: BulletPoints -->
        <div class="form-group">
            <div class="input-group">
                <input type="text" data-bind="value: $data" class="form-control">
                <span data-bind="click: $parent.deleteBulletPoint" class="input-group-addon btn">-</span>
            </div>
        </div>
        <!-- /ko -->
    </div>
    <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>
</div>

项目符号
-
添加新的要点

编辑

我已删除

$parent

，但返回了以下错误

未捕获引用错误：无法处理绑定“foreach:function（）{return BulletPoints}” 消息：无法处理绑定“单击：函数（）{return deleteBulletPoint}” 消息：未定义deleteBulletPoint

---

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

我已经添加了一个片段来说明如何使用带有敲除的可观察数组进行添加和删除，大部分代码都是直接从您的代码中获得的，因此您的思路是正确的

注意，在本例中，当绑定到方法时，不需要引用

$parent

，因为您没有使用嵌套的作用域。此外，添加时，只需传入纯文本，因为observableArray需要一个对象

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

希望这有帮助

var vm=函数（数据）{
var self=这个；
this.BulletPoints=ko.observableArray（[“test1”、“test2”、“test3”）；
this.deleteBulletPoint=函数（bulletPoint）{
自.BulletPoints.移除（bulletPoint）
}
this.addEmptyBulletPoint=函数（）{
常数c=自身BulletPoints（）.长度+1；
自动推送（“测试”+c）；
}
}
ko.应用绑定（vm）；

a{
光标：指针；
颜色：红色；
}

要点补充+
删除

我添加了一个片段来说明如何使用带有敲除的可观察数组来添加和删除，大部分代码都是直接从您的代码中删除的，因此您的思路是正确的

注意，在本例中，当绑定到方法时，不需要引用

$parent

，因为您没有使用嵌套的作用域。此外，添加时，只需传入纯文本，因为observableArray需要一个对象

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

希望这有帮助

var vm=函数（数据）{
var self=这个；
this.BulletPoints=ko.observableArray（[“test1”、“test2”、“test3”）；
this.deleteBulletPoint=函数（bulletPoint）{
自.BulletPoints.移除（bulletPoint）
}
this.addEmptyBulletPoint=函数（）{
常数c=自身BulletPoints（）.长度+1；
自动推送（“测试”+c）；
}
}
ko.应用绑定（vm）；

a{
光标：指针；
颜色：红色；
}

要点补充+
删除

您遇到的问题与ko.mapping处理基元类型数组的方式有关。通过设计，只有作为对象一部分的属性才能映射到可观察对象，因此字符串数组将成为字符串的可观察数组。它将而不是成为可观察字符串的可观察数组

为了从项目本身可见的数组中添加/删除项目，您必须使BulletPoints数组成为一个对象数组，该数组中的字符串作为属性：

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

---

下面是一个工作示例：

您遇到的问题与ko.mapping处理基元类型数组的方式有关。通过设计，只有作为对象一部分的属性才能映射到可观察对象，因此字符串数组将成为字符串的可观察数组。它将而不是成为可观察字符串的可观察数组

为了从项目本身可见的数组中添加/删除项目，您必须使BulletPoints数组成为一个对象数组，该数组中的字符串作为属性：

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

---

这里有一个工作示例：

需要澄清的一点是：OP的案例可能需要“$parent”（对于delete函数），因为他使用的是“foreach”子上下文。在上面的代码段中，它在没有$parent引用的情况下工作的原因实际上是因为applyBindings调用使用“vm”而不是“new vm（）”执行得不正确，并且add/remove方法正在做一些奇怪的事情，比如全局添加到窗口对象。我将修改！谢谢你的反馈。谢谢你的回答。正如@Jason评论的那样，我需要$parent。请查看我的编辑，因为我的值仍然为空StringsRect，因为您的代码使用内联

，这将创建一个内部上下文，要求您通过

$pare>访问父级的作用域组件