javascript - 複数のビュー モデルを持つネストされたバインド

Question

この問題の解決を手伝ってください。過去 3 週間、この問題で立ち往生しています。1つのjavascriptのオブジェクトを作成することにより、親div idがノックアウトオブザーバブルにバインドされている1つのhtmlファイルがあります。html の親 div id の内部には、別の子 div id があり、これを 2 番目の JavaScript オブジェクトにバインドして foreach ブロックに入力する必要があります。しかし、このシナリオを実装することはできません。このシナリオ。

I have mentioned here some dummy example of my scenario.Please ignore minor errors of naming convention and trailing quotes as its just a dummy code.

HTMLファイル

(div id "main" は MainModel.js にバインドされます。 MainModel.js のオブジェクトで、 showCateogaries() メソッドが呼び出され、このメソッドから getCategories1() が呼び出され、カテゴリの値が入力されます。しかし、実際にはこれは入力されていませんそして、「バインディングを解析できません」というエラーが発生しています）

<div  id="main" data-bind="visible: showMain">
        <div  id="subMain" >
              <p data-bind="text: name"></p>
              <ul id="tabArea"  data-bind="foreach : categories">
                       <li  data-bind="text: $data.categoryname ></li>
              </ul>
                </div>      
</div>

デモ.js

var main1=new MainModel(); //Main View Model
ko.applyBindings(main1,$('#main')[0]);

main1.showCateogaries();

MainModel.js

function(ko,subMainModel){
     var  mainModel =function(){
           this.showCategories = function(){
            subMainModel.getCategories1();              
        }
     }
}

subMainModel.js

function(ko){

     this.categories = ko.observableArray([]);

      this.getCategories1 = function(){
                // some code goes here
        this.categories(categoryArray.reverse());   
      };
}