Knockout.js Binding On Ajax Driven Pages

Question

Really starting to enjoy KnockoutJs (http://knockoutjs.com). Most of my web apps are ajax driven. The entire site is loaded and then from link to link we just change the body content via ajax calls.

When the ajax returns with new body content I can do my Knockout bindings. No problem. When I link to the next page (just an ajax call with replacing the body). The Knockout buildings, I would assume are still in memory, but not really bounded because the dom has changed. A few questions on this topic.

1. If the next page does not have any Knockout on it is it really that bad to leave the knockout object sort of just lingering in memory? Better yet is there a way to reset (clear) the knockout object?

2. When I go from one page that has knockout bindings to another that has knockout bindings does just calling ko.applyBindings() again clear out the old stuff and rebind the new stuff? (once again when I say going from one page to another I am just reloading the body with an ajax call).

3. Does knockout have any "live" bindings. Sort of like jQuery's live binding? This way Knockout could be loaded up front and then not have to be reapplied from content change to content change.

In general I am looking for advise on how to best use knockout from page to page in an app where the browser is not refreshing from page to page.

Thanks in advance for the help.

Answer 1

1) If the next page does not have any Knockout on it is it really that bad to leave the knockout object sort of just lingering in memory? Better yet is there a way to reset (clear) the knockout object?

No, it's not that bad; but if you'd really like to clean up then you can call ko.removeNode.

---

2) When I go from one page that has knockout bindings to another that has knockout bindings does just calling ko.applyBindings() again clear out the old stuff and rebind the new stuff? (once again when I say going from one page to another I am just reloading the body with an ajax call).

It depends.

First of all, as GregT mentioned:

One should not call applyBindings() more than once on the same DOM node(s).

I know from experience - Calling ko.applyBindings() more than once on the same DOM node will cause a memory leak. [If you need to do this, then call ko.cleanNode().]

OTOH, if you're not calling ko.applyBindings() more than once on the same DOM node, then you should be fine because:

KO will do some cleanup when adding/removing nodes. The typical time that this happens is when re-rendering a template.

---

3) Does knockout have any "live" bindings. Sort of like jQuery's live binding? This way Knockout could be loaded up front and then not have to be reapplied from content change to content change.

Not that I know of, but if I understand your question correctly, you shouldn't need any native Knockout functionality to implement what you need. You should be able to wire it up yourself with jQuery's on() method (because live() has been deprecated).