I am making a ajax call and on success I want to render the UI.
I have a menu-button (ojMenu) which is populated on success of ajax call, at the same time I want to bind each element of the generated menu with a click event i.e each <li> has associated onclick event.
The home view contains my menu code as below:
<ul id="myMenu1" style="display:none"
data-bind="ojComponent: {component: 'ojMenu', select: menuItemSelect1}">
</ul>
The home viewModel function populates the <li> of myMenu1 as below. It is executed on success of ajax request.
for(var i=0; i < res.response.length; i++) {
if(arr.indexOf(res.response[i].category) === -1) {
document.getElementById("myMenu1").innerHTML += "<li id="+res.response[i].category+" onclick=\"set();\" role=\"presentation\" class=\"oj-menu-item\"><a>"+res.response[i].category+"</a></li><li id=\"divider\" class=\"oj-menu-divider\"></li>";
arr.push(res.response[i].category);
}
}
onclick=set(); This set() function has to be outside the viewModel context otherwise it errors out saying undefined.
How do I call a function say setVM() in home viewModel context from the javascript function set()? or it would be much better if I can call setVM() from the onclick event itself.
It is also unable to find set() when it is defined inside a anonymous function. Any help on this issue is much appreciated.
Message was edited by: 3181651