敲除：可觀察到的變化的陣列

Question

後的選擇而設定字幕我有選擇結合到屬性對象的ko.observableArray()：

<select title="Select Property" 
    data-bind="options: $root.properties, 
     optionsCaption: '- Select Property -', 
     optionsText: 'name', 
     optionsValue: 'typeId', 
     value: $root.columns()[index] 
    "></select> 

當有選擇選擇元件顯示了所選擇的名稱。這工作很好，但現在我需要在選擇後修改properties observableArray。只要我這樣做，選擇將恢復到optionsCaption。

在this頁面的底部是部分

注2：後期處理生成的選項

我想這能幫助我設定選擇回顯示name但我避風港想不出如何。

禁止我可以使用JQuery來抓取選擇並設置名稱？

我想是這樣的：

$("select[title='Select Property']").setAttribute(); 

但選擇在劫的foreach產生的，所以我必須指定元素的索引，以得到它（如何？），甚至然後我不確定如何讓JQuery在淘汰賽中表現出色。

我提過我還在學習這些東西嗎？

謝謝。

------------------編輯------------------

爲了說明我是怎麼做的，中號修改陣列：

我碰到subscribeChanged的newValue和oldValue，然後

if (typeof(newValue) != "undefined") { 
    var newProperty = model.allProperties[newValue]; 
    if (model.properties.indexOf(newProperty) != -1) { 
    model.properties.splice(model.properties.indexOf(newProperty), 1); 
    } 
    model.propertiesInUse[newValue] = index; 
} 

if (typeof(oldValue) != "undefined") { 
    var oldProperty = model.allProperties[oldValue]; 

    if (model.properties.indexOf(oldProperty) == -1) { 
    model.properties.unshift(oldProperty); 
    } 
    if (model.propertiesInUse[oldValue]) { 
    delete model.propertiesInUse[oldValue]; 
    } 
} 

Answer 1

據我瞭解你的情況

- 你需要做的方式動態下拉列表任何添加dropDown用尚未選擇的值更新。

- 如果刪除下拉菜單並選擇了某個值，則需要將該值重新添加到其他dropDowns。

下面是我的做法：

例子：https://jsfiddle.net/9aLvd3uw/251/

HTML：

<!-- ko foreach: MainPropertiesList --> 
    <select title="Select Property" data-bind="value:SelectedValue"> 
    <option data-bind="value:'',text:'-Select Property -'"></option> 
     <!-- ko foreach: Options --> 
     <option data-bind="value:typeId,text:name"></option> 
    <!-- /ko --> 
    </select> 
    <span data-bind="text:'remove',click:$root.deleteColumn"></span> 
<!-- /ko --> 
<hr> 
<span data-bind="text:'add',click:$root.addColumn"></span> 

JS：

var data = [{name:"Property1",typeId:1},{name:"Property2",typeId:2},{name:"Property3",typeId:3},{name:"Property4",typeId:4}]; 

ko.subscribable.fn.subscribeChanged = function (callback, context) { 
    var savedValue = this.peek(); 
    return this.subscribe(function (latestValue) { 
     var oldValue = savedValue; 
     savedValue = latestValue; 
     callback.call(context, latestValue, oldValue); 
    }); 
}; 

var DropDownItemViewModel = function (index){ 
    var self = this; 
    self.SelectedValue = ko.observable(); 
    self.Index = ko.observable(index); 
    self.Options = ko.observableArray(($.map(data, function (item) { 
    return new OptionItemViewModel(item); 
    }))); 

self.SelectedValue.subscribeChanged(function(newVal, oldValue){ 
    if(newVal){ 
    ko.utils.arrayForEach(appVM.MainPropertiesList(), function (item) { 
     ko.utils.arrayForEach(item.Options(), function (item2) { 
      if(item2 && item2.typeId() == newVal && self.Index() != item.Index()){ 
      item.Options.remove(item2); 
      if(oldValue){ 
       item.Options.push(new OptionItemViewModel({name:"Property" + oldValue , typeId : oldValue})); 
      } 
     } 
     }); 
    }); 

    ko.utils.arrayForEach(appVM.SelectedPropertiesList(), function (item) { 
     if(item && item.typeId() == oldValue){ 
     appVM.SelectedPropertiesList.remove(item); 
     } 
    }); 
    appVM.SelectedPropertiesList.push(new OptionItemViewModel({name:"Property" + newVal , typeId : newVal})); 
    } 
    }); 
} 
var OptionItemViewModel = function (data){ 
    var self = this; 
    self.name = ko.observable(data.name); 
    self.typeId = ko.observable(data.typeId); 
} 

var AppViewModel = function(){ 
    var self = this; 
    self.numberOfColumns = ko.observable(2); 
    self.properties = ko.observableArray(); 
    self.MainPropertiesList = ko.observableArray(); 
    self.SelectedPropertiesList = ko.observableArray(); 
    for (var i = 0; i <= self.numberOfColumns(); i++) { 
    self.MainPropertiesList.push(new DropDownItemViewModel(i)); 
    } 
    self.deleteColumn = function(item){ 
    self.MainPropertiesList.remove(item); 
    self.UpdateDropDowns(item); 
    } 
    self.addColumn = function(){ 
    self.MainPropertiesList.push(new DropDownItemViewModel(self.MainPropertiesList().length)); 
    self.UpdateAddedDropDown(); 
    } 
    self.UpdateAddedDropDown = function(){ 
    var len = self.MainPropertiesList().length ; 
    ko.utils.arrayForEach(appVM.SelectedPropertiesList(), function (item) { 
     ko.utils.arrayForEach(self.MainPropertiesList()[len-1].Options(), function (item2) { 
     if(item && item2 && item.typeId() == item2.typeId()){ 
      self.MainPropertiesList()[len-1].Options.remove(item2); 
     } 
     }); 
    }); 
    } 
    self.UpdateDropDowns = function(data){ 
    if(data.SelectedValue()){ 
    ko.utils.arrayForEach(self.MainPropertiesList(), function (item) { 
     item.Options.push(new OptionItemViewModel({name:"Property" + data.SelectedValue() ,typeId:data.SelectedValue()})); 
    }); 
    } 
    } 
} 
var appVM = new AppViewModel(); 
ko.applyBindings(appVM);