ef4

import Ember from 'ember';

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

ef4

import Ember from 'ember';
import computed, { equal } from 'ember-computed';

export default Ember.Component.extend({
  tagName: '',
  didRender() {
    // show classes in DOM for debug purposes
    $('body > .my-debug').remove();
    $('body').append(`<div class="my-debug">${$('button').attr('class')}</div>`);
  }

ef4

import { helper } from 'ember-helper';
import $ from 'jquery';

export default helper(function([selector, handler]) {
  return function(event) {
    if ($(event.target).is(selector) && handler) {
      return handler(event);
    }
  };
});

ef4

import Ember from 'ember';

export default Ember.Controller.extend({
  dataPoints: [
    { id: 0, start: 1, end: 10 },
    { id: 1, start: 8, end: 20 },
    { id: 2, start: 25, end: 30 }
  ],
  lowerLimit: Ember.computed('dataPoints.[]', function() {
    return Math.min(...this.get('dataPoints').mapBy('start'));

ef4

;; Install these packages from melpa: tide, company
;; You also need `npm install -g tslint`

(require 'company)
(add-hook 'typescript-mode-hook
          (lambda ()
            (tide-setup)
            (flycheck-mode t)
            (setq flycheck-check-syntax-automatically '(save idle-change new-line mode-enabled))
            (eldoc-mode t)

ef4

List of places where jQuery's semantics are exposed in Ember's public API

1. componentInstance.$
2. Application.rootElement and ApplicationInstance.rootElement are "jQuery-compatible selectors".
3. Acceptance test helpers (click and friends) accept arbitrary jQuery selectors.
4. View.appendTo, replaceIn, findElementInParent accept jQuery selectors (I think this are is entirely legacy).
5. All event handlers receive jQuery-wrapped events, not native browser events.

ef4

import Ember from 'ember';

export default Ember.Controller.extend({
  value: 1
});

ef4

import Ember from 'ember';
export default Ember.Helper.helper(function equalHelper(params) {
  return params[0] === params[1];
});

ef4

this.transition(
  this.use('with-hook', 'fade', { duration: 250 });
);

ef4

<select onchange={{action (mut vehicle) value="target.value"}}>
  {{#each vehicles key="@item" as |vehicleChoice|}}
    <option value={{vehicleChoice}} selected={{eq vehicle vehicleChoice}}>{{vehicleChoice}}</option>
  {{/each}}
</select>