Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
EmberJS dynamic query params

I was attempting to generate a list of links and found that some of them needed query params and others didn't. I could not find a recommended way to pass in a dynamic query-params object to the link-to helper. I ended up finding a solution in the Ember Discourse and decided to make it into an ember helper.

Helper:

import Ember from 'ember';

export function dynamicParams([routeName, params]/*, hash*/) {
  return [
    routeName,
    {
      isQueryParams: true,
      values: params
    }
  ];
}

export default Ember.Helper.helper(dynamicParams);

Usage:

{{link-to 'test-link' params=(dynamic-params routeName dynamicQueryParameters)}}

Where

let routeName = 'dashboard';
let dynamicQueryParameters = {
  superCoolMetrics: true,
  graphs: false
}

Will generate <a href="https://yourapp.com/dashboard?superCoolMetrics=true&graphs=false">test-link</a>

@srt4rulez

This comment has been minimized.

Copy link

@srt4rulez srt4rulez commented Jul 17, 2018

If you use the block version of link-to, you'll need to omit the route as the first param, and just use it in the dynamic-params:

{{#link-to
    params=(dynamic-params routeName dynamicQueryParameters)
}}
    Test Link
{{/link-to}}
@Techn1x

This comment has been minimized.

Copy link

@Techn1x Techn1x commented Aug 2, 2018

Lifesaver, thanks! Don't know how this isn't officially supported in ember yet...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.