EmberJS-Router Wildcard/Globbing Routes

Description

The wildcard routes are used to match the multiple routes. You can also catch all routes which are useful when the user enters an incorrect URL. It displays all the routes in the URL.

Syntax

Router.map(function() {
   this.route('catchall', {path: '/*wildcard'});
});

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Wildcard/Globbing Routes</title>
      <!-- CDN's -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="application">
         <b>WildCard Routes</b><br/>
         <!-- defining the wildcard routes -->
         <a href="#/catchit">catch</a>
         <a href="#/catchit/caught">catch</a>
         {{outlet}}
      </script>

      <script type="text/x-handlebars" data-template-name="index">
         <b>Redirecting to index page</b>
      </script>

      <script type="text/javascript">
         App = Em.Application.create();

         App.Router.map(function(){
            //for any request catches an URL
            this.route('catchAll', { path: '*:' });
         });

         App.IndexView = Ember.View.extend({
            //defining the template name as index
            templateName: 'index'
         });

         App.CatchAllRoute = Ember.Route.extend({
            redirect: function(){
               //redirect to index page
               this.transitionToroute('index');
            }
         });
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works:

  • Save above code in routing_wildcard_rut.htm file

  • Open this HTML file in a browser.

Advertisements