I had trouble thinking of a subject line for this question.
I have an ajax based site that has a custom scrollbar mechanism. It's
based off mild.ch ScrollBar.js. I needed to perform a few
customisations, so rather than hacking his code I wrote my own class
to extend his.
The flow of things is pretty usual:
- domready
- $() the elements on the page
- construct a ScrollBar instance
- the constructor then goes ahead and sets up the scrollbar by
measuring the content in the page and all that, it also add a
mousewheel event to the scrollable content element
Now, the way I'm using the code is to hook into my ajax history
manager system and detect what "page place" we're on; if we're on a
page that has a scroll panel then instantiate a ScrollBar (event
listeners and all), If we're not, then don't.
In ScrollBar.js the content is not expected to change dynamically, so
all measurements are done in the constructor.
Two things can go wrong:
1) You are on a page that has a scrollbar, so ScrollBar is
instantiated. You then click something that causes the content inside
the scroll panel to change (load a subpage), which means the history
token has changed AND we're on a page that required scrollbars, so
ScrollBar is re-instantiated. So now, on the page is one set of
scrollbar elements (divs), but two instances of ScrollBar trying to
control it and getting confused.
2) You visit a page that doesn't have scrollbars, that page loads
fine, but the ScrollBar instance was never "desctructed". Now you go
back to a page that does require scrollbars and you end up creating a
new ScrollBar to control the scrollbar elements. You back in the same
situation of having more than one active ScrollBar instance floating
around.
Had this website been non-ajax then it would be fine because the
entire page is "destructed" and then loaded again when you click a
link, but this example has shown me something interesting: You can
pick up elements off the page using $() and then do stuff to then
including adding event handlers, then you can clear those elements
from the page by doing something as simple as container.set('html',
''); and you're is a sort of inconsistent state.
I think the immediate solution for me is to rethink the way I'm going
about this.
However in a general sense, what are the strategies for "destructing",
"disposing", "unlinking", "un-enhancing", etc.?
