Passing pre-computed routes to link-to helper in Ember

Sivasubramanian — Tue, 26 Apr 2022 02:21:49 +0000

Syntax

{{link-to routeName  dynamicSegment1 dynamicSegment2 (query-params key1=value1 key2=value2)}}

(or)

{{link-to params=linkParameters}}

Description

Consider a photo application with below routes

this.route('photos', function() {
  this.route('resolution', {
    path: '/:value'
  });
});

Compute links in component

linkParametersVariation1: computed({
  get() {
    let resolution = get(this, 'resolution);
    return { 'routeName': 'photos/resolution', dynamicSegment: resolution, page: 1, perPage: 30 }
  }
}),

linkParametersVariation2: computed({
  get() {
    let resolution = get(this, 'resolution);
    return ['photos/resolution', resolution, { isQueryParams: true, values: { page: 1, perPage: 30 } }]
  }
})

Using links in template

{{#link-to linkParametersVariation1.routName linkParametersVariation1.dynamicSegment (query-params page=linkParametersVariation1.page perPage=linkParametersVariation1.perPage)}}
  <div>variation1</div>
{{/link-to}}

{{#link-to params=linkParametersVariation2}}
  <div>variation2</div>
{{/link-to}}

DEV Community: Sivasubramanian

Passing pre-computed routes to link-to helper in Ember