How make breadcrumbs for this route?


#1

Hi all! Can anybody explain me how make breadcrumbs. I have route like this

Router.map(function() { 
     this.route(‘category’, { path: “/:category” }); 
     this.route(‘subcategory’, { path: “/:category/:subcategory”}); 
     this.route(‘item’, { path: “/:category/:subcategory/:item_id”});
     }); 

I’m a beginner in ember, just started learn.


#2

Check out ember-crumbly, it probably already does what you want, or at least you can see how it’s implemented.

Along with that, you may want to nest your routes like this:

Router.map(function() {
  this.route('category', { path: "/:category" }, function() {
    this.route('subcategory', { path: "/:subcategory" }, function() {
      this.route('item', { path: "/:item_id" });
    });
  });
});

So that a category can remain active while you are browsing all its subcategories, and a subcategory can remain active while you are browsing its items.

When you do this, your route names change, so your item route moves to being the category.subcategory.item route, and its files get nested like templates/category/subcategory/item.hbs.

Since the child routes (like item) may need access to some of the parameters or models from their parent routes, you can use this.modelFor('category') or this.paramsFor('category') from the child route.


#3

By default templates showing in parent template. When I in nested route I want disable showing parent. Please write have can i make it?


#4

You may need to pay attention to the difference between category.hbs and category/index.hbs.

It’s true that category.hbswill stay rendered during all of its child routes. But you don’t need to put anything into that template. If you put content into category/index.hbs, it will only render when there is no other child route active.