CODEWITHSUNDEEP
ember.jsember-cli
Pepper
Pepper

Reputation: 719

ember if else conditionals

I have a conditional statement which contains a link. If something is true, the I'd like it to link to a 'place a' if it is not true I'd like it to link to 'place b'. But I am getting a build error.

I removed the conditional statement, and just have a normal link (link-to) ...so just a link to one place my code builds fine. The build error is just when I try to have 2 links. See below:

        <div class="card text-xs-center">
          {{if isShowingModal}}
          {{#link-to 'place-a'}}
          {{else}}
            {{#link-to 'place-b'}}
          {{/if}}
              <div class="card-block">
                  <i class="fa fa-cogs" aria-hidden="true"></i>
              </div>
              <div class="card-block">
                  <h4 class="card-title">The Place</h4>
              </div>
          {{/link-to}}

        </div>

The error says: Error: link-to doesn't match if - 8:19

application.js

export default Ember.Controller.extend({
    isShowingModal: false,
    actions: {

        showNavMenu: function() {
          this.toggleProperty('isShowingModal');
        }
    }
});

Upvotes: 1

Views: 1553

Answers (2)

Surya Purohit
Surya Purohit

Reputation: 1120

Yes this is because you haven't closed the link-to correctly. This will help you without duplicating your link-to statement.

<div class="card text-xs-center">
    {{#link-to (if showingModal "place-a" "place-b") class='card-block fa fa-cogs'}}
        <div class="card-block">
            <i class="fa fa-cogs" aria-hidden="true"></i>
        </div>
        <div class="card-block">
            <h4 class="card-title">The Place</h4>
        </div>
    {{/link-to}}
</div>

Upvotes: 0

Muhammad Ateek
Muhammad Ateek

Reputation: 1057

actually you are not ending link-to helper properly. it should end with {{/link-to}} so in your case it will be

{{#link-to 'place-a' }} Place A {{\link-to}

{{#link-to 'place-b' }} Place B {{\link-to}

In your case complete code will be

<div class="card text-xs-center">
          {{if isShowingModal}}
           {{#link-to 'place-a' class='card-block fa fa-cogs'}}  
             The Place 
           {{/link-to}}
          {{else}}
            {{#link-to 'place-b' class='card-block fa fa-cogs'}}  
             The Place 
            {{/link-to}}
          {{/if}}         
</div>

For your help check it http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_link-to

Upvotes: 1

Related Questions