0

I have a nested menus which needs to be binded within nested DIVs in View. I have a main ViewModel which holds other view models as members. Below is the definetion of the view models:

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

The view code is:

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

After getting the list of Products from function FetchProductFamiliesForProductsKO, the sub menus are populated by calling the function GetSubFamilyForProducts on click. The requirement is to stop binding after the first foreach loop, and rebind the newly populated viewmodel member to the nested div- subFamilyAccProduct after calling the function GetSubFamilyForProducts. Can anyone help me binding the submenus in the second foreach loop?

The same code is posted at: http://jsfiddle.net/nayanakalkur/hX9Bg/8/

Thanks in advance.

4

1 回答 1

0

请检查此创建控制后代绑定的自定义绑定

默认情况下,绑定只影响应用它们的元素。但是,如果您也想影响所有后代元素怎么办?这个有可能。您的绑定可以告诉 Knockout 根本不要绑定后代,然后您的自定义绑定可以做任何事情以不同的方式绑定它们。

你也可以检查这些:

淘汰赛“controlsDescendantBindings”的使用

在 ko.applyBindings 中排除 html 元素

于 2013-06-10T11:47:10.430 回答