Serabe

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['red'],
  didInsertElement() {
    window.nested = this;
  }
});

Serabe

import Ember from 'ember';

export default Ember.Component.extend({
  click(evt) {
    alert(`has stop propagation? ${'stopPropagation' in evt ? 'Yes' : 'No'}`);
  }
});

Serabe

const callOnlyOnce = (fn) => {
  let called = false;
  return function() {
    if (called) {
      return;
    }
    called = true;
    return fn.apply(this, arguments);
  }
}

Serabe

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'span',
});

Serabe

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  foos: ['hello', 'goodbye', 'maybe'],
  bar: 'maybe'
});

Serabe

import Ember from 'ember';

export default Ember.Component.extend({
});

Serabe

import Ember from 'ember';

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

Serabe

import Ember from 'ember';

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

Serabe

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  arr: Ember.A([]),
  
  theLength: Ember.computed('arr[]', function() {
    return this.get('arr').length;
  }),

Serabe

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['green-border']
});