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（视图模型）;

ko foreach with ko.computed正在将输入值复制到下一个输入

1 个答案: