Search⌘ K
Home
Courses
Developing Robust Web Applications with Ember.js

Setting up the category Route

Discover how to set up a category route in Ember.js that dynamically filters and displays products using templates and routing parameters. Learn to implement nested routing concepts and improve your app's navigation structure.

We'll cover the following...

Let’s design the category route to render all the products by category using the category.hbs template. To display the products, we import the products in the app/routes/category.js file. Then, we add the return statement for the products in the model:

Javascript (babel-node)
// app/routes/category.js
import Route from '@ember/routing/route';
import { products } from '../data/products';
export default class CategoryRoute extends Route {
    model(params){
        return products;
    }
}

In line 7 of the code above, we return the products from our route handler. Next, we render these products in the category.hbs ...