當可觀察數組更新時，視圖模型未更新

Question

我有一個與此問題類似的問題。 KnockoutJS-根據在第一個組合框中選擇的值填充第二個組合框 ，而不是我正在使用Select元素的組合框。 我有一個主要的select元素，當選擇一個選項時，它將向第二個Select選項的模型發送一個值，並填充可觀察數組。 我的問題是選項未顯示在“選擇”字段中。 我已經完成了向控制台的寫入，並且數組中確實包含了對象，但是該模型似乎並沒有更新。

這是我的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>

模型：

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/

模型：

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);