Javascript 在表单提交时更新KnockoutJS数组

希望通过在用户单击提交按钮时更新KO数组来改善用户体验，而不是像Knockot那样自动更新。把这个测试页面放在小提琴上--但是需要一个神奇的触摸

JS:

HTML

将项目添加到阵列：




添加项



数组摘要：





手动更新数组中的项：



更新项目取消

您是要为所有修改的项目设置一次单击

更新

，还是每个数据元素都要更新？如果是每个元素，那么我会将

submit:updateItem

移动到

中，在每个更新按钮上单击：$root.updateItem（$data）

。或者，您可以设置一个数据库来为您处理数据上下文。使用带有绑定的

示例可以找到是，每个数据元素更新。不清楚“updateItem”所需的函数-它是否包括KO的替换方法来更新数组中的元素？经过进一步考虑，我开发了一个我认为您可能需要的函数。为了延迟/控制对可观察对象的修改，将“修改的”上下文包装在嵌套视图模型中。看，我又在想这个了。根据您最终拥有的字段数量，您将需要更健壮的工具来处理
Employee
的任何附加/新字段。所以我设置了另一个。修改后的上下文存储在每个可观察对象中，而不是与它们一起复制。在
Employee
上的函数中添加了
属性
的抽象后，任何添加或修改都将很容易进入现有的代码库。
function ViewModel() {

    var self = this;

    self.someVal = ko.observable();

    self.items = ko.observableArray([{
        someVal: "first item"
    }]);

    self.submitForm = function () {
        self.items.push({
            someVal: self.someVal()
        });
    };

    self.updateItem = function () {
        //Magic here
    };
}

var vm = new ViewModel();
ko.applyBindings(vm);

<form data-bind="submit: submitForm">
    <fieldset>
        <p><b>Add items to array:</b>
        </p>
        <p>
            <input data-bind="value: someVal" type="text" />
        </p>
        <p>
            <button type="submit" data-bind="">Add item</button>
        </p>
    </fieldset>
</form>
<br />
<fieldset style="background-color: #eee; "> <b>Array summary:</b>
    <br />
    <ul data-bind="foreach: items">
        <li data-bind="text: someVal"></li>
    </ul>
</fieldset>
<p><b>Update items in array manually:</b>
</p>
<form data-bind="submit: updateItem, foreach: items">
    <fieldset>
        <p>
            <input data-bind="value: someVal" />
        </p>
        <button type="submit" data-bind="">Update item</button> <button type="submit" data-bind="">Cancel</button>
    </fieldset>
    <br />
</form>
<br />
<br />
<span data-bind="text: ko.toJSON($root)"></span>