javascript - knockout 绑定(bind)无法按预期操作可观察数组

Question

我们有一个使用 Razor 和 Knockout.js 显示表单的 View 。表单的一部分要求用户输入值列表，我们使用 ko.observablearray 来跟踪它们。此列表表示为一堆文本框，每个值一个，每个框旁边都有一个“删除”按钮，所有框下方都有一个“添加”按钮。它的工作方式类似于 http://learn.knockoutjs.com/#/?tutorial=collections 中的演示项目.

我们的表单以两种方式出现意外行为:

1. 单击删除按钮时，它会从 ko.observablearray 中删除所有值，而不仅仅是与单击内容对应的值。
2. 当单击整个表单的“提交”按钮时，它会向 ko.observablearray 添加一个新元素，而不是将表单提交到我们的服务器。

为什么我们会看到这种行为？ (我知道这是两个不同的问题，但我不确定它们是否是由相同的潜在问题引起的，这就是为什么我将它们发布在一个问题中。)

这是我们的 Razor View :

@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>

这是我们的主要 Knockout 代码，OP.Input.Input.Form.js:

extend(OP, 'OP.Input.Input.Form');
OP.Input.Input.Form = function (jQuery) {
    //The ViewModel for the page
    var ViewModel = function () {
        var self = this;

        //Fields
        /* snip - lots of ko.observables() */
        self.POSTransactionCodes = ko.observableArray([]); //is a list of transaction codes
        /* snip - lots of ko.observables() */

        //Set up with initial data
        self.initialize = function () {
            var c = function (data, status, response) {
                if (status === "success") {
                    /* snip - lots of ko.observables() */
                    ko.utils.arrayPushAll(self.POSTransactionCodes, data.POSTransactionCodes);
                    self.POSTransactionCodes.valueHasMutated();
                    /* snip - lots of ko.observables() */
                } else {

                }
            };
            OP.Input.Input.Data.GetInput(c);
        }

        //When saving, submit data to server
        self.save = function (model) {
            var c = function (data, status, response) {
                if (status === "success") {
                    //After succesfully submitting input data, go to /Input/Submitted
                    //in order to let MVC determine where to send the user next
                    window.location.href = "~/Input/Submitted";
                } else {
                }
            };
            OP.Input.Input.Data.SaveInput(model, c);
        }

        //Modifying POSTransactionCodes array
        self.removePOSTransactionCode = function (POScode) {
            self.POSTransactionCodes.remove(POScode)
        }

        self.addPOSTransactionCode = function () {
            self.POSTransactionCodes.push("");
        }
    };

    //Connect KO form to HTML
    return {
        init: function (elToBind) {
            var model = new ViewModel();
            ko.applyBindings(model, elToBind);
            model.initialize();
        }
    };
} ($);

这是 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
        });
    }
};

Answer 1

您需要将一个新的 ViewModel 插入您的可观察数组。它将包含可观察的属性。

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

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

然后当用户点击“添加另一个 POS 交易代码”时:

self.addPOSTransactionCode = function () {
    self.POSTransactionCodes.push(new TransactionCodeView());
}

唯一改变的是 HTML 绑定(bind):

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

因为 code 是新 View 模型中的可观察属性，我们将 input 值绑定(bind)到它。

看看这个jsfiddle .出于显而易见的原因，我还没有测试提交功能 ;-)