JavaScript Backbone router Examples

Programming Language: JavaScript

Namespace/Package Name: Backbone

Class/Type: router

Examples at hotexamples.com: 6

Backbone Router is a module in the Backbone.js library that facilitates routing in client-side applications by mapping URL fragments to JavaScript functions. With the Backbone Router, developers can define routes and associated functions that are triggered when the URL matches the defined pattern.

Code Example 1: Setting up routes using Backbone Router

var AppRouter = Backbone.Router.extend({
  routes: {
    "": "home",
    "products": "showProducts",
    "products/:id": "showProductDetails",
    "*path": "notFound"
  },
  home: function() {
    console.log("Home page");
  },
  showProducts: function() {
    console.log("List of products");
  },
  showProductDetails: function(id) {
    console.log("Product details for ID: " + id);
  },
  notFound: function(path) {
    console.log("Invalid URL: " + path);
  }
});

var appRouter = new AppRouter();
Backbone.history.start();

This example shows how to define routes for a client-side application using Backbone Router. The `routes` property is an object that maps URLs to corresponding functions. For example, the route `""` (empty string) maps to the `home` function, which logs "Home page" in the console when triggered. The `showProductDetails` function takes a parameter `id`, which corresponds to the product ID in the URL.

Package library: Backbone.js

Code Example 2: Navigating to a route using Backbone Router

appRouter.navigate("products/123", { trigger: true });

This example demonstrates how to programmatically navigate to a specified route using the `navigate` method of Backbone Router. The first parameter is the URL fragment to navigate to, and the second parameter is an options object. The `trigger` option is set to `true` to trigger the associated function for the route. Package library: Backbone.js

JavaScript router - 6 examples found. These are the top rated real world JavaScript examples of Backbone.router extracted from open source projects. You can rate examples to help us improve the quality of examples.

Frequently Used Methods

Show Hide

trigger(4)

showFilters(1)

showGroupBy(1)

Example #1

Show file

File: criterionHeader.js Project: illyfrancis/weekly

 setSortField: function () {
   if (this.model.isSortable()) {
     this.model.makeSortField();
     Backbone.router.trigger('dashboard:search');
     this.model.collection.save();
   }
 }

Example #2

Show file

File: filters.js Project: illyfrancis/weekly

 applyFilters: function () {
   // initiate search by triggering 'search' event
   Backbone.router.trigger('dashboard:search');
   this.collection.save();
   this.$('.modal').modal('hide');
 },

Example #3

Show file

File: menu.js Project: illyfrancis/weekly

 showGroupBy: function () {
   Backbone.router.showGroupBy();
   // Backbone.router.navigate('groupby', {trigger: true});
 }

Example #4

Show file

File: menu.js Project: illyfrancis/weekly

 showFilter: function () {
   Backbone.router.showFilters();
 },

Example #5

Show file

File: groupByOption.js Project: illyfrancis/weekly

 selectGroupBy: function () {
   this.model.makeGroupField();
   Backbone.router.trigger('dashboard:search');
 },

Example #6

Show file

File: action.js Project: illyfrancis/weekly

 showNotification: function(text, type) {
   Backbone.router.trigger('dashboard:notify', text, type);
 }