Skip to content

Commit

Permalink
Add kitchen sink example
Browse files Browse the repository at this point in the history
  • Loading branch information
chadhietala committed Oct 22, 2018
1 parent cadf82d commit 414c337
Showing 1 changed file with 20 additions and 1 deletion.
21 changes: 20 additions & 1 deletion text/0000-router-helpers.md
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,7 @@ Since `{{link-to}}` is static we can write a codemod using [Ember Template Recas
<a {{transition-to 'post' this.post replace=true}}>{{this.post.name}}</a>
```

One of the tricker parts about this migration is knowing how the autogenerated CSS classes are being used. Because of this, adding the route state helpers must explicitly be turned on in the codemod. For instance if you are making heavy use of the `.active` class, you will be suited best by turning pass the codemod the correct configuration to do a transform like the following:
One of the trickier parts about this migration is knowing how the autogenerated CSS classes are being used. Because of this, adding the route state helpers must explicitly be turned on in the codemod. For instance if you are making heavy use of the `.active` class, you will be suited best by turning pass the codemod the correct configuration to do a transform like the following:

**Before**

Expand All @@ -394,6 +394,25 @@ One of the tricker parts about this migration is knowing how the autogenerated C
<a href={{url-for 'profile'}} class={{is-active 'active'}}>Profile</a>
```

If you were to transform all `{{link-to}}`s verbatim in terms of functionality this would be the result.

**Before**

```hbs
{{#link-to 'profile' model (query-parmas foo=bar) replace=true}}Profile{{/link-to}}
```

**After**

```hbs
<a
{{transition-to 'profile'
model
queryParams=(hash foo=bar) replace=true}}
class="{{if (is-active 'profile' model queryParams=(hash foo=bar)) 'active'}} {{if (is-loading 'profile' model queryParams=(hash foo=bar)) 'loading'}} {{if (is-transitioning-in 'profile' model queryParams=(hash foo=bar)) 'ember-transitioning-in'}} {{if (is-transitioning-out 'profile' model queryParams=(hash foo=bar)) 'ember-transitioning-out'}}">Profile</a>
```

## How we teach this

In many ways this vastly simplifies the Ember's approach to linking within the app. It removes the requirement for a proprietary API and instead embraces the power of URLs.
Expand Down

0 comments on commit 414c337

Please sign in to comment.