simonihmig

import Ember from 'ember';

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

simonihmig

import Ember from 'ember';

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

simonihmig

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  model: Ember.Object.create({
    lastname: 'foo'
  })
});

simonihmig

Patterns for common behaviour of Ember components without violating DDAU

DDAU (data down action up) is the common pattern for creating ideomatic components in modern Ember.js. This prevents (unexpectedly) changing your application state in components, and enables you to put your state management logic to where it belongs: the component/controller/service that "owns" that state.

But what to do if you want to enable controlling some specific part of your component for some rare cases where this is needed, but have a default common behaviour (just UI related) for controlling that property where this is not needed in most cases.

Let's look at this with an example: we want to create a component for a simple dropdown button. It has a open property that controls the state of its dropdown menu being shown: when you click on the button that property is set to true which renders the dropdown menu, and when you click again outside of it it will set it to false and thus hide the menu. So far so good, this is t

simonihmig

import Ember from 'ember';
import { nativeMouseDown, nativeMouseUp } from './ember-power-select';
import wait from 'ember-test-helpers/wait';

const { $ } = Ember;

/**
 * Add a helper function for ember-power-select that works similar to `selectChoose` (see http://www.ember-power-select.com/docs/test-helpers)
 * but within integration tests
 *

simonihmig

import Ember from 'ember';

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

simonihmig

import Ember from 'ember';

const { computed } = Ember;

export default Ember.Component.extend({
  classNames: ['my-component'],
  classNameBindings: ['show'],

  show: computed({
    get() {

simonihmig

import Ember from 'ember';

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

simonihmig

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  
  didRender() {
    console.log('didRender', this.get('item'));
  },
  
  didInsertElement() {

simonihmig

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  logs: [],
  
  cp: Ember.computed('foo.bar', function() {
    this.get('logs').pushObject('CP has been called');
    return this.get('foo.bar');