Using KnockoutJS 2.2.0 & jQuery 1.8.2 remove all bindings from all children of #someDiv
- by Nukeface
I'm wanting to delete All bindings (ko.cleanNode) from all child elements of a certain div.
Must be a noobie question but I can't figure out how to use jQuery to loop through all childre, grand-children, great-grand-children, etc. whilst having KnockoutJS remove the bindings of all the DOM elements.
I do NOT want to remove the elements from the DOM. This is a single page application, therefore the elements are pre-loaded as embedded resources and don't get resend to a client if they were to visit the page again. If a client revisits that part of the application I'll have a function rebind the necessary elements, which currently works fine.
Current setup:
<html>
<head>
//loading all resources
</head>
<body>
//load first element using some obscure setup
<div id="firsPage" data-role="page">
<div data-role="header">@Global.header</div>
<div data-role="fieldcontain">
<label for="firstInput" />
<input id="firstInput some other stuff />
</div>
<div data-role="datebox <!-- some settings --> >
//creates table using jQuery mobile (lots of (great-)(grand-)children)
</div>
<div data-role="fieldcontain">
<div id="secondInput">
<div class="checklist">
<ul>
<li />
<li />
</ul>
</div>
</div>
</div>
</div>
//Here the whole thing starts again
<div id="secondPage" data-role="page">
<!-- repeat above innerHTML in your mind ;) -->
</div>
//And here again! and again...
</body>
The problem I'm having is that bindings of the children don't seem to get "cleaned up" when i use
ko.cleanNode($('#firstPage')[0]);
Or when I get the Element into a variable and then format it to ko.cleanNode($element).
Is there a way to do this? Been staring at it for a good few hours now, so probably overlooking a way too obvious way of doing it...
Thanks!
