EmberJS-Models Customizing URLs



Description

If your JSON API is stored other than host root, prefix the url to all requests. Some APIs require HTTP headers, the headers, property and Ember Data that sends with the each Ajax request. Make an HTTP requests by changing the host.

Syntax

DS.RESTAdapter.extend({
   host: 'url'
});

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Customizing URLs</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="fruits">
         <!-- displaying the namespace of DS.attr -->
         <h1>Namespace is: <small>{{namespace}}</small></h1>
      </script>

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

         Fruits.ApplicationAdapter = DS.FixtureAdapter.extend();

         Fruits.Router.map(function () {
            this.resource('fruits', { path: '/' });
         });

         Fruits.FruitsAdapter = DS.RESTAdapter.extend({
            //set namespace property
            namespace: 'api',

            //default adapter
            defaultSerializer: '-default',

            //to change the host that requests are sent to, set the host property
            host: 'https://tutorialspoint.com',

            //Custom Http Headers
            headers: {
               'API_KEY': 'secret key',
               'ANOTHER_HEADER': 'Some header value'
            }
         });
      </script>
   </body>
</html>

Output

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

  • Save above code in model_cust_url.htm file

  • Open this HTML file in a browser.

Advertisements