0

I have the main-navbar component.

The app/templates/components/main-navbar.hbs file looks like this:

<ul>
    <li>Home</li>
    <li>Blog</li>
</ul>
<button> Add class </button>

When I click on the button I want the ul element to recieve a test class <ul class='test'> and when I click again the button, the test class to be removed.

How can I achieve this action for the button? I assume that the app/components/main-navbar.js file must be used.

Hardik Pithva
  • 1,729
  • 1
  • 15
  • 31
Cristian
  • 1,590
  • 5
  • 23
  • 38
  • 1
    Possible duplicate of [Binding static and dynamic classes with HTMLBars](http://stackoverflow.com/questions/31101967/binding-static-and-dynamic-classes-with-htmlbars) – Patsy Issa May 11 '16 at 08:15
  • 1
    Hi Christian, I've noticed you've posted a couple Ember.js questions. I suggest that you give our official Guides a good read, and join our Slack channel, we have a great _#-help_ channel. – locks May 11 '16 at 08:17

1 Answers1

5

You should look at this part of the guides, it describes how to do this exactly.You'll just bind to a property with classNameBindings if your component has tagName: 'ul'.

export default Ember.Component.extend({
  classNameBindings: ['test'],
  test: false,
  actions:{
    toggled(){
      this.toggleProperty('test')
    }
  }
});

Ah hold on, you're setting the class on another element, adding that now.

class="{{if somethingEnabled 'test' 'empty'}}"

Here is a twiddle with this implemented.

TameBadger
  • 1,580
  • 11
  • 15