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

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