Dynamically change link-to routeName

325 Views Asked by At

tl;dr: How to fix this: http://emberjs.jsbin.com/pazece/4/edit ?

I need to dynamically change routeName of link-to helper. The motivation here is to create back button in bread-crumb navigation.

Problem arrises when my application transitions from route having one dynamic segment to route with multiple dynamic segments. This results in multiple #if statements, because #link-to cannot accept variable number of dynamic segments. SO example.

I can fix that by adding multiple #if statements. Not nice, but in theory it works. Problem is that #link-to routeName property is recalculated before #if statement can apply and wipe out that link from displaying. So Ember crashes on:

Uncaught Error: You didn't provide enough string/numeric parameters 
to satisfy all of the dynamic segments for route bar

Above example is not my complex back-button code. Just stripped example.

1

There are 1 best solutions below

1
On BEST ANSWER

If you are interested in multiple #if workaround that looks awful see here.

//controller
path: 'foo',
arg: [1],

isFoo: Ember.computed.equal('path', 'foo'),
isBar: Ember.computed.equal('path', 'bar'),

actions: {
  toggle: function () {
    if (this.get('isFoo')) {
      this.set('path', 'bar');
      this.set('arg', [1, 2]);
    } else {
      this.set('path', 'foo');
      this.set('arg', [1]);
    }
  }
}

//template
  {{#if isFoo}}
    {{#link-to 'foo' arg.[0]}}
      {{path}}
    {{/link-to}}
  {{/if}}
  {{#if isBar}}
     {{#link-to 'bar' arg.[0] arg.[1]}}
       {{path}}
    {{/link-to}}
  {{/if}}

http://jsbin.com/rapevaditi/edit?html,js,output