Saturday, August 6, 2016

Use Dynamic Segments Routing in Ember 2.0 without Data Models

Dynamic segments are quite useful for any applications to give a better understanding for the user and for SEO plugins to make the site search engine friendly.
Basically dynamic segments allows the Ember Routes  to follow more segmented URLs for rendering templates. You can see that from the guide too. But in this one we are not using the data models such as
return this.store.findRecord('post', param.post_id);

In your router you have to define the routing map as


Router.map(function() {
  this.route('public');
  this.route('secure', function() {
    this.route('print', {
      path: 'print/:print_id'
    });
  });
});

or any way you prefer. Then use ember-cli to generate the router for the dynamic route


ember g route secure/print --path=:print_id


This will generate the following in the app path


routes/secure/print.js
templates/secure/print.hbs



and the main router will be modified. Specify this as route as you prefer. But I used the router map mentioned above as my application needed a separate path to print the reports generated by it.
So the URL should look like this http://localhost:4200/secure/print/print-order

In the print router modify the code as


import Ember from 'ember';
export default Ember.Route.extend({

  model(params) {
    this.print = params.print_id; // print_id return the url parameter sent from the url eg: print-order
    return {
      print: params.print_id,
    };
  }
});



In the print model you can use any design you want. But in my app I sent the component address resolved from the route and rendered the component in print.hbs. For this example I would just print the model parameters
--/print.hbs

{{model.print}}



No comments:

Post a Comment