Gabor Babicz zeppelin

Ember ES2015 Modules

The purpose of this document is to demonstrate how methods and classes could be imported inside an Ember CLI project, instead of accessing them on the Ember namespace.

For example, instead of doing this:

import Ember from 'ember';

export default Ember.Component.extend({

	test('createTestSelector', function(assert) {
	// Base namespace could be, for example, the component's name
	let base = createTestSelector('namespace');

	// Element that appears only once on the screen at a time
	assert.equal(base('single'), '[data-test-namespace="single"]');

	// List of elements, targeting all items
	assert.equal(base('multiple', null), '[data-test-namespace^="multiple:"]');

	import EmberObject from '@ember/object';

	class SubclassWithEmberInit extends EmberObject {
	someProp = 'value';

	init() {
	super.init(...arguments);
	console.log(this.someProp); // undefined
	// `this.someProp` will be available after initialization,
	// just not from the `init` method...

	import Ember from 'ember';

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

	import Ember from 'ember';

	export default Ember.Controller.extend({
	m: ['a', 'b', 'c', 'd', 'e', 'f']
	});

	import Ember from 'ember';

	export default Ember.Controller.extend({
	actions: {
	handleClick(name, e) {
	alert(name);
	e.preventDefault();
	}
	}
	});

	new MutationObserver(function() {
	var slotA = {
	count: 0,
	color: null,
	element: null
	};

	var slotB = {
	count: 0,
	color: null,

	import Ember from 'ember';
	var Route = Ember.Route;

	export default Route.extend({
	redirect() {
	this.replaceWith('root'); // Replace URL: / -> /en-US
	}
	});

	import Ember from 'ember';
	import config from './config/environment';

	var Router = Ember.Router.extend({
	location: config.locationType
	});

	Router.map(function() {
	this.resource('select-country');
	this.resource('root', { path: config.locale }, function() {

	.defaultButton {
	@extend .btn;
	@extend .btn-default;
	}