TK.Navigator

This component makes it easier to create navigateable pages using the #hash in the url.

Example

In this example all 'page' elements are loaded directly. By using the property 'Templates' instead of 'Elements', the page elements will be initialized when navigated to and destroyed when navigated away.

{
    _: TK.Navigator,
    
    Elements: {
        index: {
            _: TK.AjaxTable,
            Url: "ExampleData.txt",
            Templates: {
                Description: { HTML: "<a href='#view/$Data$' >$Data$</a>" }
            }
        },
        view: {     
            Navigate: function(param) {
                // Show items
                
                this.innerHTML = "<a href='#' >go back</a> (or use the back button) <br />";
                this.appendChild(document.createTextNode("You have selected " + param));
            }
        }
    }
}

Sub navigators

{
    Elements: {
        Menu: "<a href='#index' >Index</a> - <a href='#categories' >Categories</a>",
        Navigator: {
            _: TK.Navigator,
    
            Elements: {
                index: {
                    innerHTML: "Test Index"
                },
                categories: {
                    _: TK.Navigator,
                    innerHTML: "Test Categories <a href='#categories/shoes' >Shoes</a>"+
                               " <a href='#categories/boats' >Boats</a>"+
                               " <a href='#categories/pizza' >Pizza</a>",
                    DefaultHash: "shoes",

                    Elements: {
                        shoes: {
                            innerHTML: "Shoes!"
                        },
                        boats: {
                            innerHTML: "Boats!"        
                        },
                        pizza: {
                            innerHTML: "Pizza!"        
                        }
                    }
                }
            }
        }
    }
}