javascript - ko foreach 与 ko.computed 将输入值处理到下一个输入

Question

我有一个可观察的字符串，女巫包含一个选项列表。每个选项都由这个符号“-*！*-”分隔。还有一个名为optionsSplitted的计算函数，它负责返回一个选项数组。该数组用于foreach绑定。还有一个按钮可以添加选项。

模型上一切正常，我可以编辑我的选项，添加一个新选项。 但是当我添加一些选项然后编辑一个时，它将被复制到下一个。为什么？？？

jsfiddle

function ViewModel(args) {
    var self = this;

    self.activeAttributes = ko.observable({
        options: ko.observable('a-*!*-b-*!*-c')
    });

    self.activeAttributes.optionsSplitted = ko.computed(function(){
        return self.activeAttributes().options().split("-*!*-");      
    });

    self.changed = function (data) {
        var options = "", optionsSize = $('.option').length;
        $('.option').each(function(i){
            if(i < optionsSize - 1)
                options += $(this).val() + "-*!*-";
            else
                options += $(this).val();
        });
        self.activeAttributes().options(options);
        alert("Options: " + options)
    };

    self.addOption = function(data) {
        self.activeAttributes().options(self.activeAttributes().options() +  "-*!*-");
    };
}

var model = {
};

var viewModel = new ViewModel(model);
ko.applyBindings(viewModel);

Answer 1

使用 ko.utils.arrayMap 实用程序很好。

jsfiddle

function ViewModel(args) {
var self = this;

self.activeAttributes = ko.observable({
    options: ko.observable('a-*!*-b-*!*-c')
});

self.activeAttributes.optionsSplitted = ko.computed(function(){
    var options = self.activeAttributes().options().split("-*!*-");
    return ko.utils.arrayMap(options, function (option) {
        return {
            value: ko.computed({
                read: function () { return option; }
            })
        };
    });
});

self.changed = function (data) {
    var options = "", optionsSize = $('.option').length;
    $('.option').each(function(i){
        if(i < optionsSize - 1)
            options += $(this).val() + "-*!*-";
        else
            options += $(this).val();
    });
    self.activeAttributes().options(options);
    alert("Options: " + options)
};

self.addOption = function(data) {
    self.activeAttributes().options(self.activeAttributes().options() +  "-*!*-");
};

};

变种模型 = { };

var viewModel = new ViewModel(model); ko.applyBindings(viewModel);