MichalBryxi

import Ember from 'ember';
import { computed } from '@ember/object';

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    
    this.set('items', ['foo', 'bar', 'baz']);
  },
             

MichalBryxi

// Standard fat-arrow function stored 
// as a variable and immediatelly called. 
> let foo = () => {return '😹'}; foo() 
< "😹"

// If there is no block, then JS will 
// Implicitly return whatever is the 
// result of given statement. 
> let foo = () => '😹'; foo()
< "😹"

MichalBryxi

import Ember from 'ember';

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

MichalBryxi

import Ember from 'ember';

export default Ember.Component.extend({
  messages: [],
  
  actions: {
    clicked(who) {
      let m = this.get('messages');
      m.pushObject(who)
      this.set('messages', m);

MichalBryxi

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['my-component'],
  class: ''
});

MichalBryxi

import Ember from 'ember';

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

MichalBryxi

import Ember from 'ember';

export default Ember.Component.extend({
  actions {
		internalAction() {
			console.log('internal action');
		}
  }
});

MichalBryxi

import Ember from 'ember';
import {computed} from '@ember/object';

export default Ember.Component.extend({
  
  magicName: 'foo',
  
  foo: 'I am foo',
  
  didReceiveAttrs() {

MichalBryxi

import Ember from 'ember';
import {computed, observer} from '@ember/object';
import { on } from '@ember/object/evented';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  magicName: 'foo',
  
  foo: 'I am foo',

MichalBryxi

import Ember from 'ember';
import {computed} from '@ember/object';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  magicName: 'foo',
  
  foo: 'I am foo',
  bar: 'I am bar (not really necessary)',