Knockout.js 停止嵌套菜单的绑定'；s-淘汰赛

我有一个嵌套菜单，需要绑定到视图中的嵌套div中。我有一个主视图模型，其中包含其他视图模型作为成员。以下是视图模型的定义：

ProductMenu = function (name, subProductsMenu1, selectedMenu) {
    this.productname = ko.observable(name);
    this.submenu = ko.observableArray(subProductsMenu1);
    this.selectedProductName = ko.observable();
};
ProductSubMenu = function () {
    submenuName = ko.observable();
    submenu2 = ko.observableArray([]);
    selectedSubMenuName = ko.observable();
};
ProductSubMenu2 = function () {
    submenu2Name = ko.observable();
    properties = ko.observableArray([]);
    selectedSubMenu2Name = ko.observable();
};
Properties = function () {
    productName = ko.observable();
    shortDesc = ko.observable();
    longDesc = ko.observable();
    additionalDocs = ko.observableArray([]);
};

function MainViewModel() {
    self = this;
    self.productModel = new ProductMenu();
    self.subMenuModel = new ProductSubMenu();
    self.submenu2Model = new ProductSubMenu2();
    self.propertyModel = new Properties();
    self.AllProductsModel = ko.observableArray([]);

    self.ReturnToFamilyProduct = ko.observable(true);
    self.ShowSubMenu = ko.observable(false);
    self.showSubMenu2 = ko.observable(false);
    self.ShowBackBtnOnSubMenuClick = ko.observable(false);
    self.IfDocumentsPresent = ko.observable(true);

    //to add product to products array
    self.AddProducts = function (name, subProductsMenu1, selectedMenu) {
        self.AllProductsModel.push(new ProductMenu(name, subProductsMenu1, selectedMenu));
    };

    self.GetSubFamilyForProducts= function()
    {
        SubProductMenus1 = [];
        data=[{subFam:"test1"}, {subFam:"test2"},{subFam:"test3"}];
        for(var i=0; i< data.length; i++)
        {
            var y= data[i];
            var temp = new ProductSubMenu();
                temp.submenuName = y;
                SubProductMenus1.push(temp);

        }
        self.productModel= new ProductMenu();
        self.productModel.productname= this.productname;
        self.productModel.selectedProductName= this.productname;
        self.productModel.submenu= SubProductMenus1;
        alert(self.AllProductsModel().count);
        ko.utils.arrayForEach(self.AllProductsModel(), function (product) {
                if (product.productname() == this.productname) {
                    product.submenu = SubProductMenus1;
                }
            })
         ko.applyBindings(self.productModel, document.getElementById("subFamilyAccProduct"));
    };
}

 var VM;

$(document).ready(function () {
    console.info(new ProductMenu());
    VM = new MainViewModel();

    ko.applyBindings(VM);

    FetchProductFamiliesForProductsKO();

});

function FetchProductFamiliesForProductsKO() {
    data = [{
        family: "fassm1"
    }, {
        family: "famsss2"
    }];
    for (var i = 0; i < data.length; i++) {
        var x = data[i];

        VM.AddProducts(x.family, null,null);
    }
}

ProductMenu=function（名称、子产品菜单1、selectedMenu）{
this.productname=ko.observable（名称）；
this.submenu=ko.observatarray（subproductsMinu1）；
this.selectedProductName=ko.observable（）；
};
ProductSubMenu=函数（）{
subnumName=ko.observable（）；
子项2=可观察到的轨道（[]）；
selectedsubnumName=ko.observable（）；
};
ProductSubMenu 2=函数（）{
subnumu2name=ko.observable（）；
属性=ko.observearray（[]）；
selectedSubMenu2Name=ko.observable（）；
};
属性=函数（）{
productName=ko.observable（）；
shortDesc=ko.可观察（）；
longDesc=ko.可观察（）；
附加文档=可观测的ko.Array（[]）；
};
函数MainViewModel（）{
self=这个；
self.productModel=新产品菜单（）；
self.submonummodel=新产品子菜单（）；
self.submenu2Model=新产品submenu2（）；
self.propertyModel=新属性（）；
self.AllProductsModel=ko.observearray（[]）；
self.ReturnToFamilyProduct=ko.可观察（真）；
self.ShowSubMenu=ko.可观察（假）；
self.showsubemun2=可观察的ko（假）；
self.showbackptnonsubmenuclick=ko.可观察（false）；
self.IfDocumentsPresent=ko.可观察（真）；
//将产品添加到产品阵列的步骤
self.AddProducts=函数（名称、子产品编号1、selectedMenu）{
self.AllProductsModel.push（新产品菜单（名称、子产品菜单1、selectedMenu））；
};
self.GetSubFamilyForProducts=函数（）
{
SubProductMenus1=[]；
数据=[{subFam:“test1”}，{subFam:“test2”}，{subFam:“test3”}]；
对于（变量i=0；i

查看代码为：

<div id="browseProductDiv" >
    <div id="familyDiv">
      <ul id="productFamilyList" data-bind="foreach: AllProductsModel">
         <li data-bind="click: $root.GetSubFamilyForProducts">
            <a data-bind="text: productname">
               <div data-bind="stopBinding: true">              
                 <div id="subFamilyDiv" data-bind="visible: $root.ShowSubMenu">
                   <div id="subFamilyAccProduct" data-bind="visible: $root.ShowSubMenu">
                     <div data-bind=" foreach: productModel.submenu">
                      <h3 data-bind="attr: { 'id':subMenuName + 'Prod'},text:   subMenuName">                                                  
                      </h3>
                     </div>
                    </div>
                  </div>
               </div>
            </a>
        </li>
     </ul>
   </div>
</div>

提前谢谢。
请检查此项

默认情况下，绑定只影响它们所绑定到的元素
应用但是，如果您也想影响所有的后代元素，该怎么办？
这是可能的。你的绑定可以告诉Knockout不要绑定
然后您的自定义绑定就可以做任何事情了
喜欢用不同的方式把它们绑起来

您也可以检查这些：