Skip to content
Sandny Blog
  • Home
  • Java
  • JavaScript
  • AWS
  • Embedded
  • About
Use Dynamic Segments Routing in Ember 2.0 JavaScript

Use Dynamic Segments Routing in Ember 2.0 without Data…

  • May 19, 2017May 20, 2017
  • by Coder Kai

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}}

 

Ember sendAction in components to parent components
Installing Nios II Eclipse on Ubuntu
Coder Kai
A humble developer
Ember2 EmberJS Routing

Related articles

Multiple refs for an array of React Elements
Using multiple refs for an…
Immutable and Mutable Values in Javascript
07. Immutable and Mutable Values…
wrapper objects in javascript
06. Wrapper objects in Javascript
globals undefined and null values in javascript
05 Global, null and undefined…
Javascript Booleans and Equality
04. Javascript Guide Booleans and…
How to add Chakra UI Animations
Chakra UI Animations
SSL Websocket using Nginx Proxy
SSL Websocket proxy with Nginx…
Change python version correctly
Python is not setting correct…
optimize React.js load time
How to optimize React.js app…
Multiple refs for an array of React Elements
How to use IntersectionObserver to…
Multiple refs for an array of React Elements
How to dismiss dropdowns when…
Javascript guide Strings
03. Javascript Guide – Strings
How to fetch data with useEffect
How to fetch data with…
add styles to stripe elements
How to add styles to…
Typescript
How to use Typescript with…
how to optimize react-native map view
How to optimize react-native map…
debounce with react hooks
Avoid multiple clicks using debounce…
Numbers inJavascript
02. Javascript Guide – Numbers
Introduction to Javascript
01. Javascript Guide – Introduction…
Nginx Load Balancer with docker…

Categories

  • android 3
  • Apollo Client 1
  • AWS 8
    • AppSync 5
    • EC2 1
    • EKS 1
    • Route53 1
    • S3 1
  • AWS Amplify 1
  • Chakra UI 1
  • Docker 1
  • Embedded 1
  • EmberJS 1
  • FCM 1
  • Godaddy 1
  • GraphQL 3
  • ios 1
  • Jasper 1
  • Java 10
    • Java 11 1
    • Java 14 1
  • JavaEE 2
  • JavaScript 39
    • Express.js 4
    • Javascript Guide 7
    • Node.js 3
    • react-native 4
    • React.js 17
    • Typescript 1
  • Kubernetes 1
  • machine learning 1
  • Maven 2
  • OCaml 3
  • PostgreSQL 1
  • Python 2
  • react-native 4
  • ReactJS 3
  • sass 1
  • Server 6
  • spark 1
  • Terraform 2
  • Ubuntu 4
  • Uncategorized 1
  • webpack 2

Recent Comments

  • Registrati on Use AWS GraphQL for React Native Message App
  • Enregistrement on Android/iOS React-native heap limit allocation failed error
  • open a binance account on Installing Nios II Eclipse on Ubuntu

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Archives

  • October 2022 3
  • September 2022 7
  • May 2022 1
  • December 2021 1
  • August 2021 1
  • July 2021 6
  • June 2021 3
  • February 2021 1
  • July 2020 1
  • December 2019 5
  • November 2019 6
  • October 2019 3
  • August 2019 1
  • March 2019 1
  • February 2019 1
  • January 2019 2
  • December 2018 1
  • September 2018 2
  • August 2018 1
  • June 2018 1
  • February 2018 1
  • November 2017 2
  • October 2017 5
  • September 2017 1
  • June 2017 1
  • May 2017 10
Sandny Blog space
Theme by Colorlib Powered by WordPress