Skip to content

Instantly share code, notes, and snippets.

@GCheung55
Created March 29, 2019 00:12
Show Gist options
  • Save GCheung55/71f80b06cacd0564f9cc353b8862f558 to your computer and use it in GitHub Desktop.
Save GCheung55/71f80b06cacd0564f9cc353b8862f558 to your computer and use it in GitHub Desktop.
computed property array wrapping
import Ember from 'ember';
import { computed, set } from '@ember/object';
import { isArray } from '@ember/array';
import { typeOf } from '@ember/utils';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
incidents: null,
allIncidents: computed('incidents', function() {
const incidents = this.incidents;
if (incidents) {
return isArray(incidents) ? incidents : [ incidents ];
} else {
return null;
}
}),
incidentsType: computed('incidents', function() {
return typeOf(this.incidents);
}),
actions: {
setIncidentsArray() {
set(this, 'incidents', [ {name: 'foo'}, {name: 'bar'} ]);
},
setIncidentsObject() {
set(this, 'incidents', {name: 'bar'});
},
resetIncidents() {
set(this, 'incidents', null);
}
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
Incidents Property Type: {{incidentsType}}
<br>
<button {{action "setIncidentsArray"}}>Set Incidents Array</button>
<button {{action "setIncidentsObject"}}>Set Incidents Object</button>
<button {{action "resetIncidents"}}>Set Incidents Null</button>
<br>
{{#if allIncidents}}
{{#each allIncidents as |incident|}}
<li>{{incident.name}}</li>
{{/each}}
{{else}}
Empty Incidents
{{/if}}
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment