ChocolateChip-UI - Documentation

Docs

Everything You Need to Know

Router

API

Router

new Router()

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

const router = new 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:

const router = new Router();
router.addRoute({
  route: 'detailScreen',
  callback: () => {
    $.GoTo('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:

const router = new Router();
router.addRoute({
  route: 'detailScreen',
  callback: (param) => {
    // Get the item represented by the route's param:
    const item = myModel.filter((obj) => obj.id == param);
    // Render the view with the returned object:
    detailView.render(item);
  }
})

getFullRoute

$.ChuiRoutes.getFullRoute()

This method is executed on $.ChuiRoutes. 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:
const route = $.ChuiRoutes.getFullRoute()
console.log(route) // 'main/fruits/banana'

dispatch

Router.dispatch(route)

This method is executed on Router class. 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:
Router.dispatch('detail')

// Dispatch route with param:
Router.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.