Docs

Everything You Need to Know

Router

API

Router

$.Router()

This factory returns a router object which you assign to a variable.

var myRouter = $.Router();

addRoute

addRoute(arrayOfRoutes)

This method adds a route to your router object. It expects an array as an argument, even if you are only adding one route. A route is an object with two properties: a route and a callback.

ChocolateChip-UI's routes are the ids of screens that you will be navigating to. You do not use the `#` but purely the id value of the screen:

var myRouter = $.Router();
myRouter.addRoute([
  route: 'detailScreen',
  callback: function() {
    $.GoToScreen('detailScreen');
    detailView.render(detailData);
  }
]);

When handling a route, you have the option of also receiving and parameter with the route. The parameter is a unique value represeting a object in a collection. A route parameter is indicated by a colon after the route:

<li data-goto="detail:apple"></li>
<li data-goto="detail:orange"></li>
<li data-goto="detail:banana"></li>

From the above code, ChocolateChip-UI will send routes like this: 'detail:apple', etc. The route examines routes for parameters. When it find them, it separates them and passes them to the route's callback as the first argument. That means you can capture the parameter being passed in your routes callback:

var myRouter = $.Router();
myRouter.addRoute([
  route: 'detailScreen',
  callback: function(param) {
    // Get the item represented by the route's param:
    var item = myModel.filter(function(obj) {
      return obj.id = param;
    });
    // Render the view with the returned object:
    detailView.render(item);
  }

getFullRoute

getFullRoute()

This method is executed on a router instance. It returns a backslash delimited path of the current position of the user. In tab bars and slides this may simply be the current screen. If the user has drilled down in a navigation list, this will show the path the user has taken.

// For a myRouter router:
var route = myRouter.getFullRoute();
console.log(route) // 'main/fruits/banana'

getCurrentLoc

getCurrentLoc()

This method is executed on a router instance. It returns the user's current location. This is the id of the current screen.

// For a myRouter router:
var currentScreen = myRouter.getCurrentLoc();

dispatch

dispatch(route)

This method is executed on a router instance. It lets you dispatch to a particular route. This means that you can tell the Router to handle the route. It takes one argument, the route. All navigation wigets (tab bars, slide out menus and navigation lists) automatically dispatch their routes. Also, if you use $.GoToScreen() to direct the user somewhere, this will automatically dispath the screen id you provided.

// For a myRouter router:
myRouter.dispatch('detail');

// Dispatch route with param:
myRouter.dispatch('detail:123');

$.ChuiRoutes

The ChocolateChip-UI router object. This is an array of the current routes. ChocolateChip-UI builds the stores the screens a user navigates to in this array. When you provide a back navigation scheme, such as with back buttons, ChocolateChip-UI examines $.ChuiRoutes to see where the user came from and then send the user back.