Using query parameters

Query parameters allow you to use the URL for the application state. In these recipes, we'll use query parameters in several different ways to show how it works.

How to do it...

Query parameters are optional key-value pairs. They will appear to the right of ? in a URL.

  1. In a new project, generate a new application controller:
    $ ember g controller application

    The application controller will be generated in the app/controllers folder.

  2. Update the application controller with a new queryParams for student:
    / app/controllers/application.js
import Ember from 'ember';

export default Ember.Controller.extend({
    queryParams: ['student'],
    student: null
});

    This will set up the binding between the student query parameter in the URL and the student property in the controller. If either one changes, the other will change as well.

    If the student property was set to anything other than null, then the student property will have a default value. This is important to remember because query parameter values are cast to the same datatype as the default value. In other words, if the student property was defaulted to the number 1 and you changed the URL to /?student=2, the property would be set to the number 2, not the string "2". Additionally, remember that default values will not be serialized in the URL.

  3. Update the application.hbs file in the app/templates folder. We'll add the student property to test:
    // app/templates/application.hbs
<h2 id="title">Welcome to Ember</h2>

{{outlet}}
student: {{student}}

    This is a very simple template that just displays the student information from the controller.

  4. Start Ember server and try changing the URL. Navigate to http://localhost:4200?students=Erik. The template will be updated in order to display the new student information:
    How to do it...

Everything to the right of the question mark ? in the URL can be used in the query parameter. Each parameter is separated by an ampersand. In this case, the student property is set to Erik. This will be updated in the template.

Adding a link-to helper with a query parameter

It's important to realize that we can pass query parameters using the link-to helper.

  1. In a new project, create a new application.js controller:
    $ ember g controller application

    This will generate the application controller that we can use for our query parameter.

  2. Edit the application controller and add a new query parameter:
    // app/controllers/application.js
import Ember from 'ember';

export default Ember.Controller.extend({
    queryParams: ['student'],
    student: null
});

    In this example, we created a simple query parameter called student.

  3. Update the application.hbs file in the app/templates folder. Add the student property and new link-to helper with a query parameter:
    // app/templates/application.hbs
<h2 id="title">Welcome to Ember</h2>

{{outlet}}
student: {{student}}<br>
{{#link-to 'application' (query-params student='Jane')}}Jane Query{{/link-to}}

    You can add a query parameter to link-to by surrounding it with parentheses and using the query-params sub-expression helper. After the sub-expression comes the key-value pair. In this case, we have a student key.

  4. Start Ember server and click on the Jane Query link. The following page should appear:
    Adding a link-to helper with a query parameter

    Tip

    Using TransitionTo with query parameters

    Query parameters can be used when transitioning routes with the transitionTo method. You can add the query parameter as the final argument with the object key, queryParmams. For example, if you need to transition to the application route and you need to pass the query parameter for student, it might look like this:

    this.transitionTo('application', { queryParams: { student: 'Erik' }});

Resetting a controller's query parameters

By default, query parameters are sticky. In other words, they are preserved when you move in and out of the route. They will also preserve the model loaded in the route.

You can override this behavior in a couple of ways. One is to pass the default query parameter to the link-to helper or use transitionTo. The other way is to use the Route.resetController hook.

  1. Create a new project and generate a new route called route1:
    $ ember g route route1
$ ember g controller route1

    This will create a new route and controller for route1.

  2. Edit the route1.js file in the app/controllers folder:
    // app/controllers/route1.js
import Ember from 'ember';

export default Ember.Controller.extend({
    queryParams: ['student'],
    student: null,
});

    Just like our previous example, we are using a simple query parameter called student.

  3. Edit the route1.js file in the app/routes folder. Add a new resetController hook to the route:
    // app/routes/route1.js
import Ember from 'ember';

export default Ember.Route.extend({
    resetController: function (controller, isExiting, transition) {
        this._super(controller,isExiting,transition);
        if (isExiting) {
          controller.set('student', null);
        }
    }
});

    In this route, we are using the resetController hook. This will fire whenever someone exits or transitions from the route. As before, we must call super so that we don't prevent the default behavior. The isExiting argument will be false only if the route's model is changing, otherwise it will fire.

    The controller.set method is a way in which we can access the student property. We'll set it to null so that when we move away from route1, it will not be preserved.

  4. Edit the application.hbs file in the app/templates folder. Add a link-to helper to the new route1 route:
    // app/templates/application.hbs
<h2 id="title">Welcome to Ember</h2>
{{#link-to 'route1'}}Route 1{{/link-to}}<br>
{{outlet}}

    This template is very simple. All we are doing is creating a link to the new route1.

  5. Edit the route1.hbs file in the app/templates folder. Add the student property and a link back to the main application route:
    Route 1<br>
student: {{student}}<br>
{{#link-to 'application'}}App{{/link-to}}<br>

    This template displays the student property that we can set via query parameters. It then has a link back to the main application route.

  6. Run ember server and load the application. Enter the URL, http://localhost:4200/route1?student=Erik. This will display route1 with the query parameter for student. If you click on the app link, it will bring you back to the main application. If you click on the Route 1 link again, it will not preserve the query parameter and will be reset. It will look like the following image:
    Resetting a controller's query parameters

How it works...

Query parameters are key-value pairs that appear to the right of ? in the URL of the application. They help define an additional application state by serializing data in the URL. They are set in the route-driven controllers. We can use transitionTo and link-to helpers to navigate to them easily.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset