vitch

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';

	searchParams = new URLSearchParams(window.location.search);
  isViewingChildCid = this.searchParams.has('_cid');
}

vitch

{{#let (state (type "tab-manager") this.model) as |tabManager|}}

  <h2>Items</h2>
  <ul>
    {{#each tabManager.tabs key="label.state" as |tab|}}
    <li>
      {{tab.label.state}}
      {{#unless tab.isOpen.state}}
      <button onclick={{action tabManager.activateTab tab}} type="button" class="button-xs">+</button>
      {{/unless}}

vitch

import Ember from 'ember';

export default Ember.Component.extend({
  fruits: null,
  selectedId: null,
  
  init() {
    this._super(...arguments);
    this.fruits = [
      { id: 1, name: 'apple' },

vitch

import Component from '@ember/component';
import { computed } from '@ember/object';
import { scheduleOnce } from '@ember/runloop';
const { max, pow } = Math;

const FONT_SIZES = Object.freeze([null, null, null, 34, 26]);

export default Component.extend({
  tagName: '',

vitch

import Ember from 'ember';

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

vitch

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

const MyClass = Ember.Object.extend({
  awaitLoadedData: computed.readOnly('_deferDataLoad.promise'),
  _onDataLoaded() {
    this.get('_deferDataLoad').resolve(this);
  },
  _deferDataLoad: computed(() => RSVP.defer()),

vitch

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

const Foo = Ember.Object.extend({
  bar: computed(function() {
    console.log(`bar ${this.id} called`);
    return `${this.id} > bar`;
  }),
});

vitch

import Ember from 'ember';

export default Ember.Component.extend({
  w: 50,
  width: Ember.computed('w', function() {
    return Ember.String.htmlSafe(`width: ${this.get('w')}px`);
  }),
  mouseMove(e) {
    this.set('w', e.clientX - 10);
  }

vitch

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

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

vitch

import Ember from 'ember';

export default Ember.Component.extend({
  didRender() {
    console.log('inner', this.elementId, 'didRender', this.$().html());
  }
});