New Twiddle

abilities.thing.js

import { computed } from '@ember/object';
import { Ability } from 'ember-can';
import { Promise as EmberPromise } from 'rsvp';


export default Ability.extend({
  parseProperty(propertyName) {
    return propertyName;
  },
  
  someAbility: computed('thing.status', function() {
    return new EmberPromise((resolve, reject) => {
      resolve(this.get('thing.status') > 2)
    });
  }),
  anOtherAbility: computed('thing.status', function() {
    return new EmberPromise((resolve, reject) => {
      resolve(this.get('thing.status') > 2)
    });
  }),

  someOtherAbility: computed('thing.status', function() {
    return new EmberPromise((resolve, reject) => {
      resolve(!this.get('thing.status') % 3)
    });
  }),

  yetOtherAbility: computed('thing.status', function() {
    return new EmberPromise((resolve, reject) => {
      resolve(this.get('thing.status') > 2)
    });
  }),
});

components.my-component.js

import Component from '@ember/component';
import { computed } from '@ember/object';
import { inject as service } from '@ember/service';
import { Promise as EmberPromise } from 'rsvp';
import Ember from 'ember';

export default Ember.Component.extend({
  can: service(),
    showOptions: computed('showOptions_someAbility', function() {

      return new EmberPromise((resolve, reject) => {
      EmberPromise.all([
        this.get('showOptions_someAbility'),
        this.get('showOptions_anOtherAbility'),   
        this.get('showOptions_someOtherAbility'),
        this.get('showOptions_yetOtherAbility')
      ]).then(function(values){
        resolve(!!values.filter(Boolean).length);
      });
    });
  }),
  
  showOptions_someAbility: computed('thing', function() {
    return this.get('can').can('thing.someAbility', null, { thing: this.get('thing') });
  }),
	showOptions_anOtherAbility: computed('thing', function() {
    return this.get('can').can('thing.anOtherAbility', null, { thing: this.get('thing') });
  }),
	showOptions_someOtherAbility: computed('thing', function() {
    return this.get('can').can('thing.someOtherAbility', null, { thing: this.get('thing') });
  }),
	showOptions_yetOtherAbility: computed('thing', function() {
    return this.get('can').can('thing.yetOtherAbility', null, { thing: this.get('thing') });
  }),

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return [
      { id: 1, label: 'one', status: 1 },
      { id: 2, label: 'two', status: 0 },
      { id: 3, label: 'three', status: 3 },
      { id: 4, label: 'four', status: 3 },
      { id: 5, label: 'five', status: 3 },
      { id: 6, label: 'six', status: 3 },
      { id: 7, label: 'seven', status: 2 },
      { id: 8, label: 'eight', status: 2 },
      { id: 9, label: 'nine', status: 1 },
      { id: 10, label: 'ten', status: 2 },
      { id: 11, label: 'ten one', status: 1 },
      { id: 12, label: 'ten two', status: 0 },
      { id: 13, label: 'ten three', status: 3 },
      { id: 14, label: 'ten four', status: 3 },
      { id: 15, label: 'ten five', status: 3 },
      { id: 16, label: 'ten six', status: 3 },
      { id: 17, label: 'ten seven', status: 2 },
      { id: 18, label: 'ten eight', status: 2 },
      { id: 19, label: 'ten nine', status: 1 },
      { id: 20, label: 'twenty', status: 2 },
      { id: 21, label: 'twenty one', status: 1 },
      { id: 22, label: 'twenty two', status: 0 },
      { id: 23, label: 'twenty three', status: 3 },
      { id: 24, label: 'twenty four', status: 3 },
      { id: 25, label: 'twenty five', status: 3 },
      { id: 26, label: 'twenty six', status: 3 },
      { id: 27, label: 'twenty seven', status: 2 },
      { id: 28, label: 'twenty eight', status: 2 },
      { id: 29, label: 'twenty nine', status: 1 },
      { id: 30, label: 'thirthy', status: 2 },
    ]; 
  },
});

services.can.js

import CanService from 'ember-can/services/can';

export default CanService.extend({
  parse(str) {
    let [abilityName, propertyName] = str.split('.');
    
    abilityName = abilityName.dasherize().replace('-', '/');

    return {
      propertyName,
      abilityName
    };
  }
});

templates.application.hbs

<ul>
{{#each model as |thing|}}
<li>{{my-component thing=thing}}</li>
{{/each}}</ul>
<hr>

templates.components.my-component.hbs

<li>
	<b>{{thing.label}}</b>
  
  {{#if (await showOptions)}}
    [
    	capabilities: 
    {{#if (await showOptions_someAbility)}}
    	<small>someAbility</small>
    {{/if}}

    {{#if (await showOptions_anOtherAbility)}}
    	<small>anOtherAbility</small>
    {{/if}}

    {{#if (await showOptions_someOtherAbility)}}
    	<small>someOtherAbility</small>
    {{/if}}

    {{#if (await showOptions_yetOtherAbility)}}
    	<small>yetOtherAbility</small>
    {{/if}}
		]
  {{/if}}
</li>

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",
    "ember-can": "1.1.1",
    "ember-promise-helpers": "1.0.6"
  }
}