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.