samedi 27 juin 2015

Remove a sticky parameter

I have an application which displays flight information. All list of all flights is available via http://localhost:4200/flights and a list of all flights from Frankfurt via http://localhost:4200/flights?from=FRA

Below the displayed list are two links for the user to toggle between the views. Unfortunately once a user clicked on the http://localhost:4200/flights?from=FRA link he/she has no way of going back to http://localhost:4200/flights via clicking on the corresponding link. The from=FRA parameter is sticky.

How can I link to the http://localhost:4200/flights page and get rid of the from=FRA parameter?

The code I use:

app/templates/flights.hbs

<ul>
{{#each flight in filteredFlights}}
  <li>{{flight.code}} {{flight.from}} - {{flight.to}}</li>
{{/each}}
</ul>

<ul>
  <li>{{#link-to 'flights'}}All flights{{/link-to}}</li>
  <li>{{#link-to 'flights' (query-params from="FRA")}}Flights from Frankfurt{{/link-to}}</li>
</ul>

app/controllers/flights.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['from','to'],
  from: null,
  to: null,

  filteredFromFlights: function() {
    var from = this.get('from');
    var flights = this.get('model');

    if (from) {
      return flights.filterBy('from', from);
    } else {
      return flights;
    }
  }.property('from', 'model'),

  filteredFlights: function() {
    var to = this.get('to');
    var flights = this.get('filteredFromFlights');

    if (to) {
      return flights.filterBy('to', to);
    } else {
      return flights;
    }
  }.property('from', 'to', 'model')
});

app/routes/flights.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.find('flight');
  }
});




Aucun commentaire:

Enregistrer un commentaire