複数のViewModels

Question

サブモデルでマスターモデルを使用する方法を理解しようとしています。それは現在選択されているだけのマスタービューです。しかし、コンソールにエラーが表示されています。問題の原因を推測しなければならないとすれば、データバインドのグループを行う必要があり、バインドするモデルを知らされていないと思います。

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

<div data-bind="text: 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("B"); 
} 


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

var testSelect = function(selectedValue) { 
    this.groups = ko.observableArray([ 
     new Group("Group 1", [ 
      new Option("Option 1", "A"), 
      new Option("Option 2", "B"), 
      new Option("Option 3", "C") 
     ]), 
     new Group("Group 2", [ 
      new Option("Option 4", "D"), 
      new Option("Option 5", "E"), 
      new Option("Option 6", "F") 
     ]) 
    ]); 

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

}; 
ko.applyBindings(new mainView()); 

エラー

knockout-min.js:72 Uncaught ReferenceError: Unable to process binding "foreach: function(){return new Array(numberOfRows()) }" 
    Message: Unable to process binding "foreach: function(){return groups }" 
    Message: groups is not defined 

はここにjsfiddleです：https://jsfiddle.net/gauldivic/bjsswdqu/5/

Answer 1

問題は、あなたの実際モデルはあなたのビューのmodのtsプロパティの下にあるということですエル。あなたはそのプロパティを通してそれらを参照する必要があります。

<select data-bind="foreach: ts.groups, value: ts.selectedOption"> 
    <option value ="0"></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> 

updated fiddle