在不重置对象的情况下重新计算 Computed Observable

Question

我最近开始玩 Knockout，但遇到了一个问题。我已经尝试以各种方式谷歌搜索，但我找不到任何适用的结果。

假设我有这个模型：

var model = new function () {
    var that = this;

    this.parameterRegex = ko.observable(/\@@{1}\w+/ig);
    this.query = ko.observable('SELECT @@par1 from @@par2');
    this.parameterNames = ko.computed(function () {
        var allParameters = that.query().match(that.parameterRegex());
        return (allParameters == undefined) ? [] : jQuery.unique(allParameters);
    });
    this.parameters = ko.computed(function () {
        return ko.utils.arrayMap(that.parameterNames(), function (item) {
            return {
                Name: ko.observable(item),
                Example: ko.observable()
            }

        });
    });
};

在 HTML 中，我与 Parameters 计算的 observable 绑定，但每次 Query observable 更改和 Parameters observable 重新计算时，我都会丢失该计算项的所有状态。

我的意思是，如果我在 HTML 中将一个 foreach 与 Parameters 绑定，并且我在该 foreach 中有一些输入框，例如：

<textarea name="query" class="form-control" data-bind="value: query, valueUpdate:'afterkeydown'" rows="10" style="margin-bottom:20px"></textarea>
<div data-bind="foreach: parameters">
    <p data-bind="text: Name"></p>
    <input type="text"></input>
</div>

一旦重新计算 Computed Observeable，用户在输入中键入的任何文本都将丢失。

我将如何解决这个问题？

Answer 1

解决方案是保留一个单独的数组，其中包含对象，然后如果它们存在于数组中，则重新使用这些对象，而不是每次都重新创建它们。

var parameters = [];
this.parameters = ko.computed(function () {
    var newParams = [];
    for (var i = 0; i < that.parameterNames().length; i++) {
        var name = that.parameterNames()[i];
        var result = $.grep(parameters, function(p){ return p.Name() == name; });
        var param;
        if (result.length === 0) {
            param = {
                Name: ko.observable(name),
                Example: ko.observable()
            };
        }
        else {
            param = result[0];
        }

        newParams.push(param);
    }
    parameters = newParams;
    return newParams;
});

jsfiddle