ember-query-params-proxy
This addon enables you to do DDAU compatible handling of query parameters while passing the parameters on the subcomponents. This makes it easy to use query parameters in your application and let the controller contain the single source of truth with regards to the value of the parameters. The queryParams proxy gives you a convenient way to pass along several query parameters as well as their mutation actions to components without the need to enumerate each parameter and manually create mutation actions for them.
Usage
-
ember install ember-query-params-proxy
-
In your controller file you specify the query parameters to use in normal fashion but also create a computed property with the help of the queryParams proxy like this:
import Controller from '@ember/controller'; import proxy from 'ember-query-params-proxy'; export default Controller.extend({ queryParams: [ 'foo', 'bar' ], foo: 42, bar: 'someString', queryParamsProxy: proxy() });
-
Pass along the queryParams proxy to your component in your template like this:
-
The queryParams proxy contain aliased properties for all queryParams defined in your controller. These aliases can be used to read the properties
<QUERY_PARAM_NAME>
, and the proxy also contain mutation actions that can be used to mutate the same directly on the controller<QUERY_PARAM_NAME_mut>
. The proxy can be use in you component template like this: -
If using ember-form-for you probably want to use the third parameter of the
update
action which contains the value. In this you can simple include the optionemberFormFor
when creating the proxy like this:import proxy from 'ember-query-params-proxy'; queryParamsProxy: proxy({ emberFormFor: true })
TODO:s & future enhancements
-
Currently we only support string-configured query parameters:
queryParams: [ 'foo', 'bar' ]
We should also support object-configured query parameters:
queryParams: { foo: { type: 'number' }, bar: { type: 'string' } }
As well as mixed-mode configurations:
queryParams: [ 'foo', { bar: 'query_params_bar' } ]
-
It might also be good to make it possible to hook into the mutation action before it updates the query parameter property. For instance with more complex objects like dates and such, some manual mangling might be wanted.
Development & Running
git clone <repository-url>
this repositorycd ember-query-params-proxy
yarn install
ember serve
- Visit your app at http://localhost:4200.
Running tests
ember test
– Runs the test suite on the current Ember versionember test --server
– Runs the test suite in "watch mode"ember try:each
– Runs the test suite against multiple Ember versions
Running the dummy application
ember serve
- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
Publishing
First time
- Create a npm user account if you don't have one:
npm adduser
. - Use
npm login
to store the credentials on the client. - Ask an
@ecraft
npm organization admin to add you to the organization.
Every time
- Make your changes
npm version <update_type>
, where update_type is one of the semantic versioning release types, patch, minor, or major. This command will change the version number in package.json. Note that this will also add a tag with this release number to your git repository.git push
npm publish
- Give yourself a pat on the back