CODEWITHSUNDEEP
ember.js
Cristian
Cristian

Reputation: 1670

How can I add a class to a div from a component in emberjs?

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.

Upvotes: 0

Views: 1600

Answers (1)

TameBadger
TameBadger

Reputation: 1590

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.

Upvotes: 5

Related Questions