當可觀察數組更新時，查看模型不更新

Question

我遇到類似於此問題的問題。 KnockoutJS - populating second combobox based on value selected in first combobox，而不是使用選擇元素的組合框。我有一個主選擇元素，當選擇一個選項時，會向第二個選擇選項的模型發送一個值，並填充可觀察數組。我的問題是，選擇字段中沒有顯示選項。我已經寫了控制檯，數組確實有對象，模型似乎沒有更新。

這裏是我的jsfiddle https://jsfiddle.net/gauldivic/bjsswdqu/37/

HTML：

<select data-bind="foreach: ts.groups, value: ts.selectedOption"> 
      <option value ="-1"></option> 
       <optgroup data-bind="attr: {label: label}, foreach: children"> 
        <option data-bind="text: label, option: value()"></option> 
       </optgroup> 
     </select> 
    <select data-bind="foreach: ts2.groups2,value:ts2.selectedOption"> 
     <option value ="-1"></option> 
     <optgroup data-bind="attr: {label: label}, foreach: children"> 
      <option data-bind="text: label,option: value()"></option> 
     </optgroup> 
    </select> 
     <hr /> 

     <div data-bind="text: ts.specialProperty"></div> 

MODEL：

ko.bindingHandlers.option = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     ko.selectExtensions.writeValue(element, value); 
    }   
}; 

var mainView = function() 
{ 
    this.ts = new testSelect(""); 
    this.ts2 = new testSelect2(); 
} 


function testGroup(label, children) { 
    this.label = ko.observable(label); 
    this.children = ko.observableArray(children); 
} 

function testOption(label, property) { 
    this.label = ko.observable(label); 
    this.value = ko.observable(property); 
} 

function testGroup2(label, children) { 
    this.label = ko.observable(label); 
    this.children = ko.observableArray(children); 
} 

function testOption2(label, property) { 
    this.label = ko.observable(label); 
    this.value = ko.observable(property); 
} 


function testSelect2(content,selectedValue) 
{ 
     //alert(content); 
     this.groups2 = ko.observableArray(); 
    if(content == 1) 
    { 
     this.groups2.push(new testGroup("Letters",[new testOption("C","3"),new testOption("D","4")])); 
     console.debug(groups2()); 
    } 
    else if(content == 2) 
    { 
     this.groups2.push(new testGroup2("Letters",[new testOption2("E","5"),new testOption2("F","6")])); 

    } 

    this.selectedOption = ko.observable(selectedValue); 
    this.specialProperty = ko.computed(function(){ 
     var selected = this.selectedOption(); 
     return selected ? selected : 'unknown'; 
    }, this); 
} 

var testSelect = function(selectedValue) 
{ 
    this.groups = ko.observableArray(); 
    this.groups.push(new testGroup("Letters",[new testOption("A","1"),new testOption("B","2")])); 


    this.selectedOption = ko.observable(selectedValue); 
    this.specialProperty = ko.computed(function(){ 
     var selected = this.selectedOption(); 
     return selected ? selected : 'unknown'; 
    }, this); 

    this.selectedOption.subscribe(function(newValue) 
    { 
    if(newValue != -1) 
    { 
     alert(newValue); 
     testSelect2(newValue); 
    } 
    }); 
}; 
ko.applyBindings(new mainView()); 

Answer 1

我能弄明白。感謝@Roy j我調用testSelect2（newValue）的方式是替換整個數組，而不是將數組添加到數組中。 https://jsfiddle.net/gauldivic/L284Lkdk/3/

MODEL：

ko.bindingHandlers.option = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     ko.selectExtensions.writeValue(element, value); 
    }   
}; 

var mainView = function() 
{ 
    this.ts = new testSelect(""); 
    this.ts2 = new testSelect2(); 
} 


function testGroup(label, children) { 
    this.label = ko.observable(label); 
    this.children = ko.observableArray(children); 
} 

function testOption(label, property) { 
    this.label = ko.observable(label); 
    this.value = ko.observable(property); 
} 

function testGroup2(label, children) { 
    this.label = ko.observable(label); 
    this.children = ko.observableArray(children); 
} 

function testOption2(label, property) { 
    this.label = ko.observable(label); 
    this.value = ko.observable(property); 
} 


function testSelect2(content,selectedValue) 
{ 
     //alert(content); 
     this.groups2 = ko.observableArray([]); 
    this.groups2.push(new testGroup("Letters", [new testOption("X","42")])); 

    this.selectedOption = ko.observable(selectedValue); 
    this.specialProperty = ko.computed(function(){ 
     var selected = this.selectedOption(); 
     return selected ? selected : 'unknown'; 
    }, this); 
}; 

var testSelect = function(selectedValue) 
{ 
    this.groups = ko.observableArray([]); 
    this.groups.push(new testGroup("Letters",[new testOption("A","1"),new testOption("B","2")])); 


    this.selectedOption = ko.observable(selectedValue); 
    this.specialProperty = ko.computed(function(){ 
     var selected = this.selectedOption(); 
     return selected ? selected : 'unknown'; 
    }, this); 

    this.selectedOption.subscribe(function(newValue) 
    { 
    if(newValue != -1) 
    { 
     //alert(newValue); 
     //console.log(mv.ts2.groups2.push(new testGroup("Letters",[new testOption("C","3"),new testOption("D","4")]))); 
     //mainView.ts2.getData(newValue); 

     if(newValue == 1) 
     { 
       mv.ts2.groups2.removeAll(); 
      mv.ts2.groups2.push(new testGroup("Letters",[new testOption("C","3"),new testOption("D","4")])); 
     //console.debug(groups2()); 
     } 
     else if(newValue == 2) 
     { 
     mv.ts2.groups2.removeAll(); 
      mv.ts2.groups2.push(new testGroup2("Letters",[new testOption2("E","5"),new testOption2("F","6")])); 
     }; 
    } 
    else 
    { 
    mv.ts2.groups2.removeAll(); 
    } 
    }); 
}; 
var mv = new mainView(); 
ko.applyBindings(mv); 

當你調用`testSelect2（NEWVALUE）`