Javascript 敲除绑定无法按预期操作可观察数组

我们有一个使用Razor和Knockout.js显示表单的视图。表单的一部分要求用户输入一个值列表，我们使用

ko.observablearray

来跟踪它们。此列表表示为一组文本框，每个值一个，每个框旁边有一个“删除”按钮，所有框下面有一个“添加”按钮。它的工作原理与位于的演示项目类似

我们的表单以两种方式出人意料地运行：

单击删除按钮时，它会删除

ko.observableARay

中的所有值，而不仅仅是与单击内容对应的值

当点击整个表单的“提交”按钮时，它会向

ko.observearray

添加一个新元素，而不是将表单提交给我们的服务器

为什么我们会看到这种行为？（我知道这是两个独立的问题，但我不确定它们是否由相同的根本问题引起，这就是为什么我将它们放在一个问题中。）

以下是我们的观点：

@model OurProject.Models.Input.InputModel
@{
    ViewBag.Title = "Input";
}

<h2>Inputs</h2>

<div id="inputForm">
    <!-- snip - lots of input elements to fill in that are bound to KO -->

    <div>
        @Html.LabelFor(model => model.POSTransactionCodes)
    </div>
    <div>
        <span class="help-block">Separate values by commas.</span>
    </div>
    <div>
        <ul data-bind="foreach: POSTransactionCodes">
            <li><input data-bind="value: $data" /> <a href="#" data-bind="click: $root.removePOSTransactionCode">Delete</a></li>
        </ul>
        <button data-bind="click: addPOSTransactionCode">Add another POS Transaction Code</button>

        @Html.ValidationMessageFor(model => model.POSTransactionCodes, null, new { @class = "help-inline" })
    </div>
    <!-- snip - more input elements -->

    <button data-bind="click: save">Submit</button>
</div>

<script type="text/javascript" src='~/Scripts/jquery-1.8.2.min.js'></script>
<script type="text/javascript" src='~/Scripts/knockout-2.1.0.js'></script>
<script type="text/javascript" src='~/Scripts/OP/OP.js'></script>
<script type="text/javascript" src='~/Scripts/OP/Input/OP.Input.Input.Form.js'></script>
<script type="text/javascript" src='~/Scripts/OP/Input/OP.Input.Input.Data.js'></script>
<script type="text/javascript">
    var elementToBindTo = $("#inputForm")[0];
    OP.Input.Input.Form.init(elementToBindTo);
</script>

以下是OP.Input.Input.Data.js：

extend(OP, 'OP.Input.Input.Data');
OP.Input.Input.Data = {
    GetInput: function (callback) {
        $.get("/API/Input/InputAPI/GetInputModel", callback);
    },
    SaveInput: function (input, callback) {
        $.ajax({
            url: "/API/Input/InputAPI/SaveInput",
            type: "post",
            data: input,
            complete: callback
        });
    }
};

---

您需要将新的ViewModel推入您的可观察阵列。它将包含可观察的属性

为此，我创建了一个名为TransactionCodeView的新视图模型

var TransactionCodeView = function() {
  var self = this;
  self.code = ko.observable("");    
};

然后，当用户单击“添加其他POS交易代码”时：

唯一改变的是HTML绑定：

<li><input data-bind="value: code" /> <a href="#" data-bind="click: $root.removePOSTransactionCode">Delete</a></li>

因为

code

是新viewmodel中的可观察属性，所以我们将

输入

值绑定到该属性

---

看看这个。我没有测试提交功能，原因很明显；-）

这就是为什么提交功能在我的表单上不起作用的原因：

在我看来，我有一把剃须刀：

<div>
    <ul data-bind="foreach: POSTransactionCodes">
        <li><input data-bind="value: $data" /> <a href="#" data-bind="click: $root.removePOSTransactionCode">Delete</a></li>
    </ul>
    <button data-bind="click: addPOSTransactionCode">Add another POS Transaction Code</button>

    @Html.ValidationMessageFor(model => model.POSTransactionCodes, null, new { @class = "help-inline" })
</div>

<li><input data-bind="value: code" /> <a href="#" data-bind="click: $root.removePOSTransactionCode">Delete</a></li>

<div>
    <ul data-bind="foreach: POSTransactionCodes">
        <li><input data-bind="value: $data" /> <a href="#" data-bind="click: $root.removePOSTransactionCode">Delete</a></li>
    </ul>
    <button data-bind="click: addPOSTransactionCode">Add another POS Transaction Code</button>

    @Html.ValidationMessageFor(model => model.POSTransactionCodes, null, new { @class = "help-inline" })
</div>

<input type="button" value="Add another POS Transaction Code"
    data-bind="click: addPOSTransactionCode" />