javascript - ko.computedを使用したkoforeachは、入力値を次の入力にコピーしています

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 model = {};

var viewModel = new ViewModel（model）; ko.applyBindings（viewModel）;