Skip to content
Do you have controllers that _only_ parse query params? now you can get rid of them :)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
src
tests
types/dummy
vendor
.editorconfig
.ember-cli.js
.eslintrc.js
.gitignore
.travis.yml
CONTRIBUTING.md
LICENSE.md
README.md
ember-cli-build.js
index.js
package.json
renovate.json
tsconfig.json
yarn.lock

README.md

ember-query-params-service

Build Status

Compatibility

  • Ember.js v3.9 or above
  • Ember CLI v3.9 or above

Installation

# ember install ember-query-params-service # (not yet)
ember install github:NullVoxPopuli/ember-query-params-service

Usage

The @queryParam Decorator

import Route from '@ember/routing/route';
import { queryParam } from 'ember-query-params-service';

export default class ApplicationRoute extends Route {
  @queryParam('r') isSpeakerNotes;
  @queryParams('slide') slideNumber;
  
  model() {
    return {
      isSpeakerNotes: this.isSpeakerNotes,
      slideNumber: this.slideNumber
    }
  }
}
{{this.model.isSpeakerNotes}} - {{this.model.slideNumber}}

optionally, a deserialize function may be passed to the decorator:

import Component from "@glimmer/component";
import { queryParam } from "ember-query-params-service";

export default class SomeComponent extends Component {
  @queryParam("foo", {
    deserialize: (qp) =>  parseInt(qp)
  })
  foo;

   addToFoo() {
    this.foo = (this.foo || 0) + 1;
  }
}

this would allow numeric operations on the query param (whereas, by default, query params are all strings)

Expanded usage with the service

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { alias } from 'ember-query-params-service';


export default class ApplicationRoute extends Route {
  @service queryParams;

  @alias('queryParams.current.r') isSpeakerNotes;
  @alias('queryParams.current.slide') slideNumber;
  
  model() {
    return {
      isSpeakerNotes: this.isSpeakerNotes,
      slideNumber: this.slideNumber
    }
  }
}

Setting Query Params

  • Directly on the service:

      @service queryParams;
    
      // ...somewhere
      this.queryParams.current.queryParamName = 'some value';

    and then the URL will show queryParamName=some%20value

  • or via the @alias decorator:

      @alias('queryParams.current.r') isSpeakerNotes;
    
      // ...somewhere
      this.isSpeakerNotes = false;

    and then the URL will show r=false

  • or via the @queryParam decorator:

      @queryParam('r') isSpeakerNotes;
    
      // ...somewhere
      this.isSpeakerNotes = false;

    and then the URL will show r=false

API

  • queryParams.current - the current set of query params for the currentURL

  • queryParams.byPath - query params for every route that has been visited since the last refresh

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

You can’t perform that action at this time.