<div class="row" id="menuBody" data-bind="foreach:categoryArray"> <div class="outer col-md-2" data-bind=" attr:{id:id},event:{mouseover :$parent.mouseOverKnockout,mouseout:$parent.mouseOutKnockout }"> <div class="inner col-md-12"> <label class="label" data-bind="text:name"> </label> <div class="children" data-bind="css:{changeTopChildren: changeTopChildren}"> <ul data-bind="foreach:$parent.items1" class="childrenUl"> <li data-bind=" text: name,attr:{id:id},click: $parent.selectLi" class="childrenLi col-md-12"></li> </ul> </div> </div> </div> </div>
var modelCategory = function (id, name) { var self = this; self.changeTopChildren = ko.observable(false); self.name = ko.observable(name); self.id = ko.observable(id); } var modelProduct = function (id, name) { var _self = this; _self.name = ko.observable(name); _self.id = ko.observable(id); _self.selectLi = function () { alert("li"); console.log(" selectLi"); }; } var viewModelMenuBody = function () { var self = this; self.selectLi = function (tag) { alert("li"); console.log(" selectLi"); }; self.categoryArray = ko.observableArray(); self.items1 = ko.observableArray(); var temp = null; self.mouseOverKnockout = function (arg, e) { temp = arg; for (var i = 0; i < self.categoryArray().length; i++) { self.categoryArray()[i].changeTopChildren(false); } arg.changeTopChildren(true); $.getJSON("/Home/getChildrenForMenu", { id: arg.id }, function (rowProduct) { self.items1.removeAll(); for (var total = 0; total < rowProduct.length; total++) { var temp = new modelProduct(); temp.id(rowProduct[total].id); temp.name(rowProduct[total].name); self.items1.push(temp); } }); } self.mouseOutKnockout = function (arg) { if (arg!=null) arg.changeTopChildren(false); //else // temp.changeTopChildren(false); }; (function () { $.getJSON("/Home/getDataForMenu", null, function (rowCategory) { for (var total = 0; total < rowCategory.length; total++) { var temp = new modelCategory(); temp.id(rowCategory[total].id); temp.name(rowCategory[total].name); self.categoryArray.push(temp); } }); })(); }; var viewModel1 = new viewModelMenuBody(); ko.applyBindings(viewModel1, document.getElementById('menuBody'));