How to make a conditional link-to in Ember.js?

Question

I am using Ember.js version 2.8.2.

I want to wrap things inside link-to only if condition is true.

First try:

{{#if isAdmin}}
  {{#link-to admin}}
    contents here
  {{/link-to}}
  {{else}}
    contents here
{{/if}}

Problem: the code is not dry, because content repeats twice.

How should I do this? Thanks.

Answer 1

First option:

If you want to remove it from your dom, wrap your "link-to" component as a component (my-admin-link.hbs):

{{#if isAdmin}}
  {{#link-to admin}}
    {{yield}}
  {{/link-to}}
{{else}}
    {{yield}}
{{/if}}

Than use it as:

{{#my-admin-link}}
   your content
{{/my-admin-link}}

Second option:

Use disabled and disabledClass of link-to:

{{#link-to admin disabled=isNotAdmin disabledClass='showastext'}}
    your content
{{/link-to}}

In your app.css showastext can be defined as:

.showastext{
    text-decoration: none;
    cursor: text;
    color: black;
}