Skip to content

Instantly share code, notes, and snippets.

View controllers.application\.js
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
actions = {
sendData() {
this.transitionToRoute('received', {
queryParams: {
data: 'some-data'
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
ben: 'Ben Chen',
name: Ember.computed.or('width', 'height', 'ben'),
});
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
View components.my-component.js
import Ember from 'ember';
export default Ember.Component.extend({
_privateProp: 1,
prop: Ember.computed({
get() {
return this._privateProp;
},
// Every time "prop" is set
View components.my-component.js
import Ember from 'ember';
export default Ember.Component.extend({
didRender() {
alert('rendered');
}
});
View components.child-component.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
clearPlaceholder() {
this.set('placeholder', '');
}
}
});
View controllers.application.js
import Ember from 'ember';
class AbortError extends Error {
}
function makeAbortable(promise) {
const abortController = new AbortController();
const _promise = promise
.then(result => {
if (abortController.signal.aborted) {
throw new AbortError;
View components.inapp-alert-manager.js
import Ember from 'ember';
export default Ember.Component.extend({
inAppAlert: Ember.computed.readOnly('inAppAlertQueue.firstObject'),
init() {
this._super(...arguments);
this.set('inAppAlertQueue', [
'hello',
View components.inapp-alert-manager.js
import Ember from 'ember';
export default Ember.Component.extend({
inappAlert: Ember.computed.readOnly('liveAlertsQueue.firstObject'),
init() {
this._super(...arguments);
this.set('liveAlertsQueue', []);
},
// This just fakes putting a queue on after the component is rendered
View components.child-component.js
import Ember from 'ember';
import EmberObject, {
observer
} from '@ember/object';
export default Ember.Component.extend({
alertWhenMultipleOfFive: observer('observable.progress', function() {
if (this.get('observable.progress') % 5 === 0) {
alert('Child says progress was a multiple of 5!');
}