this.store.query update component list

Question

How can I get this.store.query to update when a new id is passed to a component? i.e.

// application/template.bs

 // Generic ember link-to passing the dashboard id
  <ul class="dropdown-menu">
      {{#each dashboard.service as |dashboard|}}
          <li>
            {{#link-to 'dashboard' dashboard}}{{dashboard.dashboard_name}}{{/link-to}}
          </li>
      {{/each}}
   </ul>

// dashboard/template.hbs

<h1>{{model.dashboard_name}}</h1>
{{widget-list dashboard_id=model.id}}

// components/widget-list/template.hbs

{{#each widgets as |widget|}}
  {{widget-base widget=widget}}
  {{else}}
    <small>No widgets for this dashboard</small>
{{/each}}

// components/widget-list/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  widgets: Ember.computed(function() {
    var widgets = this.store.query('widget', {
      dashboard: this.get('dashboard_id')
    });
    return widgets;
  }),
});

Basically i'm viewing different dashboards which have widgets attached. The model.dashboard_name will update when I click my dashboard links, but the widgets stay the same. If I hard refresh, they update, but I need to them update with the new widget list when each dashboard link is clicked. For some reason this isn't happening.

Can anyone provide a fix or some info as to what I need to do?

Answer 1

You could watch dashboard_id property:

export default Ember.Component.extend({
  widgets: Ember.computed('dashboard_id', function() {
    var widgets = this.store.query('widget', {
      dashboard: this.get('dashboard_id')
    });
    return widgets;
  }),
});