binding nested viewmodels: knockout

Question

I have nested ViewModels where the MainViewModel holds the instance of the nested VMs.

The code the for the same is here: http://jsfiddle.net/nayanakalkur/2YCsN/19/

view code:

<div id="familyDiv">
    <ul data-bind="foreach: AllProductsModel">
        <li data-bind="click:function(data, event){ $('#subFamilyDiv').show(); $('#familyDiv').hide(); $root.GetSubFamilyForProducts(data, event); }">
            <a data-bind="text: productname">   
            </a>
        </li>                    
    </ul>                
</div>

 <div id="subFamilyDiv">
     <a id="btnBackToFamily" data-bind="click: function(){ $('#subFamilyDiv').addClass('hidePanel'); $('#familyDiv').removeClass('hidePanel'); }">Back</a>
     <div id="subFamilyAccProduct">
         <div data-bind="foreach: submenu">
             <ul  data-bind="text: subMenuName">
             </ul>
         </div>
     </div>
</div>

VM code:

var VM;
$(document).ready(function () {
    VM = new MainViewModel();
    ko.applyBindings(VM,document.getElementById("familyDiv"));
    ko.applyBindings(VM.productModel, document.getElementById("subFamilyAccProduct"));
    FetchProductFamiliesForProductsKO();
});

function FetchProductFamiliesForProductsKO() {
    var data=[{family: 'family1'},{family:'family2'},{family:'family3'}];

    for (var i = 0; i < data.length; i = i + 1) {
        var fam = data[i].family;
        console.log(fam);
        VM.AddProducts(fam, null, fam);
    }
};

ProductMenu= function(name, subProductsMenu1, selectedMenu) {
    var self= this;
    self.productname = ko.observable(name);
    self.submenu = ko.observableArray([]);
    self.selectedProductName = ko.observable();
};

ProductSubMenu=function() {
    var self = this;
    self.submenuName = ko.observable();
    self.submenu2 = ko.observableArray([]);
    self.selectedSubMenuName = ko.observable();
};

ProductSubMenu2= function() {
    var self = this;
    self.submenu2Name = ko.observable();
    self.properties = ko.observableArray([]);
    self.selectedSubMenu2Name = ko.observable();
};

Properties= function() {
    var self = this;
    self.pName = ko.observable();
    self.shortDesc = ko.observable();
    self.longDesc = ko.observable();
    self.additionalDocs = ko.observableArray([]);
};

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

    //if true- show family products, hide sub family products 
    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) {
        this.AllProductsModel.push(new ProductMenu(name, subProductsMenu1, selectedMenu));
    };

    self.GetSubFamilyForProducts = function (data, event) {
        this.ShowSubMenu = ko.observable(true);
        SubProductMenus1 = [];
        //this.ShowBackBtnOnSubMenuClick = ko.observable(true);
        var currentElement = data;
        $('#subFamilyDiv').show();
        $('#btnBackToFamily').html("back: "+currentElement.productname());
        self.productModel = new ProductMenu();
        self.productModel.productname = ko.observable(currentElement.productname());
        self.selectedProductName = ko.observable(currentElement.productname());
        var data=[{subFamily: 'subFamily1'},{subFamily:'subFamily2'},{subFamily:'subFamily3'}];

            $(data).each(function (index, subFamily) {
                var tt= data[index].subFamily;
                var temp = new ProductSubMenu();
                console.log("subfamily:"+ tt);
                temp.submenuName = tt;
                SubProductMenus1.push(temp);
            });

            self.productModel.submenu = ko.observable(SubProductMenus1);
            ko.utils.arrayForEach(self.AllProductsModel(), function (product) {
                if (product.productname() == currentElement.productname()) {
                    console.log("found"+ product.submenu().length);
                    product.submenu = ko.observable(SubProductMenus1);
                    console.log("found"+ product.submenu().length);
                }
            })

    };
}

The submenu defined under productModel is failing to bind.

Any help would be appreciated.

Thanks!

Could you desbribe the expected result and the actual result ? — Damien
The expected result is : on selecting the family type the sub families should show up. like: family1, family 2, family 3.. on selecting family1- the sub families should show up. To do this i have created an observableArray called submenu in ProductMenu constructor. The submenu member gets filled in the method GetSubFamilyForProducts. Now the newly filled view model - self.productModel present in the mainviewmodel is binded to the div- <div id="subFamilyDiv">. How should the binding be changed in view so that i can iterate through submenu items in view? — user2439903

Damien Damien · Accepted Answer · 2013-06-12T09:31:37

The submenu property contains no items. In this fiddle I just add a fake item and the resuting view shows a fakeSubMenu element. So I think you only have add items in the submenu property and it will work.

This is what I done :

ProductMenu= function(name, subProductsMenu1, selectedMenu) {
    var self= this;
    self.productname = ko.observable(name);
    self.submenu = ko.observableArray([{subMenuName: 'fakeSubMenuName'}]);
    self.selectedProductName = ko.observable();
};

I hope it helps.

See fiddle

binding nested viewmodels: knockout

1 Answers