EmberJS - Specifying the URL Type

Specifying the URL Type

The router also uses the browser's history API to locate the pages that are used before. You can also disable the location API.

Ember.Router.extend({
  location: 'history'
});

In the above code the Router to use the browser's history API.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Specifying the URL Type</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://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.prod.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="application">
         <!-- link-to for navigation between the routes -->
         {{#link-to 'authors'}}AuthorInfo{{/link-to}}
         {{#link-to 'books'}}BookInfo{{/link-to}}
         {{outlet}}
      </script>

      <script type="text/x-handlebars" data-template-name="authors">
         <h2>Authors Page </h2>
         <ul>
            <li>Herbert Schildt</li>
            <li>Robert Lafore</li>
         </ul>
      </script>

      <script type="text/x-handlebars" data-template-name="books">
         <h2>Books Page</h2>
         <ul>
            <li>Java</li>
            <li>C++</li>
         </ul>
      </script>

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

         App.Router.map(function() {
            //refers to the authors template and path refers within page
            this.route('authors', { path: '/' });
            //refers to the books template
            this.route('books');
         });

         Ember.Router.extend({
            //getting the history of the pages are searched before
            location: 'history'
         });
      </script>
   </body>
</html>

Output

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

  • Save above code in routing_history.htm file

  • Open this HTML file in a browser.

Advertisements