Quick Tip: How To Pass Information From Your Template To Your Route in Ember.js

Quick Tip: How To Pass Information From Your Template To Your Route in Ember.js

In today's blog we'll go over some basic tips on passing data to your route. For now we won't worry about the model. We'll also ignore working with a component. We'll go over that in a future blog post. If you'd like some more information on components check out my example guide.

So how do you pass information from your template to your route? We can do this in several ways! I'll explain a few below.

Setup

First we'll assume you already have ember-cli installed. Let's create a brand new project

$ ember new testRoute
$ ember g route index
$ ember g template index

Routes

OK we now have a basic project setup. Let's assume that we have a text field and we want that sent to our index route. As of now we'll ignore our controller since it's not important.

// app/templates/index.hbs

<br>
{{textarea value=importantinfo cols="40" rows="1"}}
<button type="button" {{action "routeaction" importantinfo}}>route button</button>

What this does is the Ember textarea value is stored in importantinfo. This property gets sent to the action routeaction when the button is pressed. Our route will look something like this.

// app/routes/index.js
import Ember from 'ember';

export default Ember.Route.extend({
    actions: {
        routeaction:  function(stuff) {
               alert(stuff);

        }
    }
});

For the purpose of this tutorial we are just going to show an alert box with the values in the textarea. What if we have two properties?

// app/templates/index.hbs

<br>
{{textarea value=importantinfo cols="40" rows="1"}}
{{textarea value=importantinfo2 cols="40" rows="1"}}
<button type="button" {{action "routeaction" importantinfo importantinfo2}}>route button</button>

Easy! We can pass two variables. Our route will look about the same except the function now will accept two arguments.

// app/routes/index.js
import Ember from 'ember';

export default Ember.Route.extend({
    actions: {
        routeaction:  function(stuff, stuff2) {
               alert(stuff);
               alert(stuff2);

        }
    }
});

Why?

So why should we pass information to the route and not just have it be handled by our component? Recently Balint Erdi wrote an article on the 8 most common Ember.js developer mistakes. Number eight on that list was mutating passed in properties in components. The basic idea was that you want to keep your components reusuable. One way of doing that was to remember the rule "Data Down Actions Up". DDAU

What DDAU means is that data should be passed down from route to controller to component (as you might see with a model) while components should use actions to notify their context about changes in this data. When actions are sent to components they don't bubble up. You have to send the action to the route using send action. You can even specify which action to send it to when adding the component in the template.

This goes a little beyond what this tutorial goes into, so I'll leave this for a future post.

Future

As you can see passing information into a route is very simple. We'll look into doing this with components in a future post.

Questions? Please tweet me at @ErikCH

Image credit to Red Bubble