URI

This feature will help you to obtaining data from the URL and also push/replace the current URL.
Usually sf.URI will be together with sf.Views for page routing. But you can also trigger sf.URI manually.

Obtaining URL data

sf.URI has some properties that would be changed everytime sf.Views doing a page routing.

/* For the example for current URL: 
   http://localhost/my/path?search=myself#myview/route1#;data:an,array
 */

// Trigger the parser manually
sf.URI.parse(); // No parameter

// The properties on sf.URI will automatically updated
sf.URI == {
    path:   "/my/path",         // Main URL path
    routes: {myview:"/route1"}, // Hash routes
    data:   ["an", "array"],    // Data on the URL
    query:  {search:"myself"}   // GET Query data
}

// You can also pass String parameter of URL to parse
// and obtain the Object without modifying sf.url's properties
sf.URI.parse("http://url/here"); // String parameter

Push or Replace the browser's URL

You can freely modify the properties of path, routes, data, query on sf.URI. When modifying, the URI on the browser's address will not immediately updated and you should trigger push/replace manually.

/* Example of current URL: http://localhost/paths */
// sf.URI.path == "/paths"

// Prepare our URL data
sf.URI.path = "/new/path";
sf.URI.query = {search:"myself"};

// Replace current URL
sf.URI.replace();

// Or Push from the current URL
sf.URI.push();

Using sf.URI.push will add a new history on the browser, so user can go back to recent history with browser's back button. But using sf.URI.replace will only replace the current URL history.

Event Listener

You can also listen to URL changes when the URL was Replaced (with sf.URI.replace) or Pushed (with sf.URI.push). Usually sf.Views will trigger this Event Listener feature automatically.

Add listener

The available EventName: path, query, routes, data The available Options: path

/* sf.URI.on(EventName, Options, Callback) */

// For example, we want to listen to GET query changes on the URL
// http://localhost/main/path?search=myself
sf.URI.on('query', function(obj){
    console.log(obj.search === "myself"); // true
});

// Or with an options, to trigger the callback on specific main URL path only
sf.URI.on('query', {path:'/main/path'}, function(obj){
    console.log(obj.search === "myself"); // true
});

// You can also listen to an event once
// The parameter is similar with sf.URI.on(...)
sf.URI.once(...);

Remove Listener

To remove specific callback from the sf.URI.

sf.URI.off(EventName, Callback);

// To remove all listener from an event
sf.URI.off(Eventname);

Usually you must call this if you have registered the listener inside of sf.component.

sf.component(..., function(My){
    var MyListener;

    // Register the event after this component was initialized
    // You can also register before initialization by put it outside
    // this function
    My.init = function(){
        sf.URI.on('query', MyListener = function(){
            ...
        });
    }

    // Clear the event when this element is destroyed
    My.destroy = function(){
        sf.URI.off('query', MyListener);
    }
});