Setting selected model from route's dynamic segment

@bmurphy wrote:

Hello,

I would greatly appreciate some guidance on whether or not what I've done is the "ember" way of doing things. What I have is a basic reporting page that loads reports into a dropdown menu. When one is selected the user is shown a list of "runs" for the selected report. I set the current selected report on my reports controller for the dropdown among other things. First some code so you can see what's going on.

app/router.js

Router.map(function() {
   this.route('reports', function() {
     this.route('report', {path: '/:report_id'});
    });
   this.route('config');
});

The template containing the dropdown of reports route looks like:

app/templates/reports.hbs

{{#power-select searchField="name"
                options=reports
                selected=selectedReport
                onchange=(action "selectReport") as |report|}}
  {{report.name}}
{{/power-select}}

{{outlet}}

When the user makes a selection I transition to the nested report route from the routes controller.
app/controllers/reports.js

export default Ember.Controller.extend({
  selectedReport: null,

  actions: {
    selectReport(report) {
      this.set('selectedReport', report);
      this.transitionToRoute('reports.report', report.get('id'));
    }
  }
});

Now finally my nested route:
app/routes/reports/report.js

export default Ember.Route.extend({
  model(params) {
    // Need to allow setupController to get the currently selected Report.
    this.set('report_id', params.report_id);

    return this.get('store').query('report-run', {
      report: params.report_id
    });
  },

  setupController(controller, reportRuns) {
    this._super(controller, reportRuns);

    // Get currently selected report.
    let selectedReport = this.get('store').peekRecord('report', this.get('report_id'));

    // Set on parent controller for dropdown
    this.controllerFor('reports').set('selectedReport', selectedReport);

    // Set on this route's controller for various uses.
    controller.set('selectedReport', selectedReport);
  },
});

Is this "the right" or standard way of doing this? It feels a little weird to me. In essence I need to know which report to set on the reports controller for back button support, page refreshes etc. I greatly appreciate any critique on this way of doing it.

If it helps I am using version 2.11.3 of Ember-Data and Ember.

Posts: 1

Participants: 1

Read full topic