History

[SteveG]

Steve,

Curious what you think about adding 'history' plugin in knockoutjs.
Basically, leaving the page and hitting the back button tend to reset
the page - there are times, especially with ajax, that users want to
see the previous page state (ie. an ajax search form).

With your binding scenarios I was wondering if this could be done?

[Ω Alisson]

You could use Sammy.js to have this kind of funcionality

[Roy Jacobs]

I think what Steve is saying is that he'd like an observable change to
trigger an address change.

You could implement that yourself by taking something like
jquery.address and hooking up the appropriate subscriptions.
The only thing that is not currently available in KO (afaik) is
getting the old value of an observable. You would need that
information to be able to go 'back' to the previous state.

Roy

[MrM]

Are you talking about viewstate for your models?

How about converting your model to JSON, saving to a cookie and vice
versa when needed to reload? You just have to manage when to save and
when to load. I'll be doing something like that next week.

[Jim Raden]

Cookie lengths are somewhat limited (4kB?), and that cookie will be
passed in with each call to web server. There are a number of plugins
that take advantage of other client-side storage mechanisms, though;
jStorage comes to mind. (http://www.jstorage.info/)

You could also combine knockoutjs with sammy.js, which never leaves
the page, a la Gmail and NewTwitter. Note that while I've read in
several places that this can be done, I haven't tried it myself. Also,
sammy.js structures your application into a one-pager -- although
potentially a very rich one-pager -- and naturally there are places it
can't be used.

[Jim Raden]

I hadn't realized someone already mentioned sammy.js.

[fla...@gmail.com]

Hey folks

Absolutely - I think it would be very natural to link certain
properties in your view model with the URL history state to get "back"
button support. In fact that's pretty much exactly what I have been
doing on my own projects, more or less as Roy described.

To clarify one possible way of doing this, check out the following
working example: http://pastie.org/1275061

This is a simple kind of master-details editor where you can navigate
through a set of products. I've used the jQuery Address plugin (http://
www.asual.com/jquery/address/), which is trivial to link to Knockout
observables. In my demo the function linkObservableToUrl(observable,
hashPropertyName) ensures that whenever the observable changes, it
goes into the URL, and whenever the URL changes, the data goes back
into the observable. This means you can use back/forwards to navigate
through the history of products you've opened.

The approach I've used on real projects is to avoid the complexity of
serializing arbitrary view model object graphs, and instead have a
specific set of string-valued observables that represent your
navigation position (in the pastie example, that's
"selectedProductName"). Based on these string values, much of the rest
of the view model state can be constructed (e.g., in the pastie
example, "selectedProduct"). This also means you can choose which
specific changes go into the URL history - e.g., in this example
editing a price doesn't go into the URL, because you probably wouldn't
want to undo that change by pressing "back" - but you would want
actions that feel like navigation to go into the URL history.

In practice this could be made more sophisticated, e.g., adding a
mechanism to update the URL asynchronously so that a sequence of
multiple state changes causes only one new URL history entry. If
there's demand for this, either I or someone else could put together a
little knockout.history.js plugin or similar.

Regards
Steve