emberjs providing data for multiple components

1
votes

I have an Ember 2.11 application template with a few component placeholders at the moment (menu, breadcrumbs, related items) and an outlet which displays the main content which works fine. Now that I'm feeling more comfortable with the basics, I'm ready to try getting the breadcrumbs working.

I read about services, but I don't see that it is the right solution for breadcrumbs because it doesn't need to be persistent, it is based off the route. Although it is based off the route, I don't want to use the route literally as I want to use nice titles, and when viewing a specific item, the route doesn't accurately reflect what the breadcrumbs should show.

Since the breadcrumbs is based off the model that is being used for the display, I feel that I should be able to construct a breadcrumb object and then pass that into the component from the application template. I suppose this was the purpose of the controller back in the day. My thought was in the route to construct a breadcrumb object/property and return it with the model like RSVP and then I could access both in the template to pass the appropriate object to the appropriate component. But that seems wrong as the route should return an Ember data object, promise or Javascript array.

My current line of thinking is along these lines.

template/application.hbs

{{bread-crumbs crumbs=model.breadcrumbs}}
{{outlet}}

route/category/show

export default Ember.Route.extend({
  model(params) {
    let recipe = this.get('store').query('recipe', { category: params.category_id});
    let crumbs = [{name: 'Category', link: 'category'},
                  {name: recipe.category.title, link: 'category.show', target: recipe.category.id}];
    return {recipe: recipe, breadcrumbs: crumbs};
  }
});

I'm not sure if this is the right way to approach this or if this will cause problems with async data fetching with Ember data. Something like this I would have to define on each route, but I don't have a lot of routes and seems to offer flexibility when I'm displaying a recipe (route is /recipe/recipe_id), but have the breadcrumbs show Home > Categories > Main Dishes > My Awesome Dish.

How would you approach the problem?

Updated 2017-02-10:

It appears that the model is not passed to the application template, only the route template. I'm not sure how to pass data 'down' to the application template.

2
ember.js

2 Answers

0
votes

You could probably create a breadcrumb like this by tracking the elements in a service, but I'd check out the ember-crumbly addon. It seems like it will meet your needs.

0
votes

Remaining in your thinking line, if you want to pass your model as a variable of your controller in the route that you are accessing you need something like this:

export default Ember.Route.extend({
    model(params){
        let recipe = ...;
        let crumbs = ...;

        return {...};
    },
    setupController(controller, model){
        this._super(controller, model);
        controller.set('variable', model);
    }
});

Having this, in your controller you can access to the crumbs like this:

this.get('variable');

And in then with an Ember.computed you can create a variable for display in your template.

Sorry for the minimize your code but I'm not in my computer.

Another approach is setting the crumbs variable at the init of the application controller, this set the variables defined in that controller global to the application, so you can modify them from other controllers and in the application controller lookup for that changes via didUpdateAttrs() or with didUpadteElement().

Hope this resolve your problem.

Greetings