How to manage page state with refresh and back-button support with knockout js and AJAX

[manish]

Hi

My Question is I have a application with
left-side navigation of categories now i click to category at right
side box
it loads product list
now i click to product list item it loads dealers list of it

as of now navigation list, product list, dealers list is json object
array coming on ajax request and generating particular template and
render

now when i press refresh button or back button it should show same
product of vender list
and preserve browser click history

any help around it will be appreciated


Manish

[Ian Drake]

You can check out HistoryJS.  It's a fairly low level wrapper around HTML5 pushstate and HTML4 hashes, but you can wrap it in your own way to suit your needs.

https://github.com/balupton/history.js 

[Seth Messer]

Have you been able to get url-based observables setup with using history.js per chance?

[Ian Drake]

I'm not sure what you mean by url-based observables.  Can you explain?

[Seth Messer]

Ian, 

What I was getting at, was, have you done anything to tie a querystring param to an observable? I've seen it's usage in the SPA examples using different frameworks (sammy, jquery.address + knockout.address), but was wondering with using just the history.js plugin and knockout, have you seen or done anything that would allow you to set observables from the querystring, so that when you went forward/back in the history it would function as you'd expect, setting values of observables from the querystring params.

I've been toying around with doing this, but it's very inconsistent thus far. Just looking for a clean solution for this that works with querystrings like the following:

http://domain.com/pages?key=value

or

http://domain.com/pages?key1=value1&key2=value2

Thanks much!

Seth

[Seth Messer]

I'm working on getting a jsfiddle put together to show what i have thus far.

[Ian Drake]

I have done something similar to that, not for historyjs, but to default viewModel values based on query string.  The problem is that every value pulled off the URL is a string type which will mess up bool and date based properties.

Here the code quick and dirty code I was using (notice the url is pulled off the document, you might want to change that):

ko.bindUrlToViewModel = function (viewModel) {

	//parse the url into an object



	var url = document.location.toString();

	var queryStart = url.indexOf("?")



	if (queryStart < 0)

		return;



	var query = url.substr(queryStart + 1);

	if (query.length == 0)

		return;



	var nvps = query.split("&");

	for (var i = 0, l = nvps.length; i < l; i++) {

		var nv = nvps[i].split("=");

		if (nv.length >= 1) {

			var name = window.decodeURIComponent(nv[0]);

			if (ko.isObservable(viewModel[name])) {

				var value = true;

				if (nv.length == 2)

					value = window.decodeURIComponent(nv[1]);

				viewModel[name](value);

			}

		}

	}

}

With historyjs, I've found it's easier to use the state argument rather than url parameters, but then I'm not interested in supporting "deep linking".

It'll be easier to talk specifics when I see the fiddle.  Historyjs and knockout can be like a hammer, so many ways to use it, but using it wrong can cause damage.

--
Ian Drake
860 670 2178

[Ian Drake]

Lesson learned.  Don't use gmail to reply with source code.  Sorry for the formatting.