New Twiddle

components.example-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['archived', 'hidden'],

  archived: true,

  actions: {
    toggle() {
      this.toggleProperty('archived');
    },
  },

});

controllers.application.js

import Ember from 'ember';
console.clear();

export default Ember.Controller.extend({
  appName: 'more than one class binding',

  showArchived: false,
  
  things: [
    {
      name: 'one',
    },
    {
      name: 'two',
    },
    {
      name: 'three',
    },
	],

  actions: {
    toggleArchive() {
    	this.toggleProperty('showArchived');
    }
  },
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}


.archived {
  background: yellow;
  border: 1px solid red;
}

.hidden {
  opacity: .5;
}

templates.application.hbs

<h1>{{appName}}</h1>

{{#each things as |thing|}}
	{{example-component 
  	name=thing.name
    archived=true
    hidden=showArchived
    class="{{if thing.archived 'archived' if showArchived 'hidden'}}"
  }}
{{/each}}

<br>
<button {{action 'toggleArchive'}}>toggle</button>
<br>showArchived: {{showArchived}}

templates.components.example-component.hbs

{{name}}

<button {{action 'toggle'}}>toggle</button> {{hidden}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}