Ilya Radchenko knownasilya

@model, @action and @service basically expose the underlying thing that they decorate to the component set by @associatedComponent (which is made up and not a great name).

I can also see something like @model({ pauseRendering: false }) and @model({ waitForParent: false }) for the data loading.

Setup app with "new pods"

MODULE_UNIFICATION=true ember new my-app --yarn

Enable Ember features

ember install @ember/optional-features

ember feature:enable application-template-wrapper

	'use strict';

	var path = require('path');
	var express = require('express');
	var exphbs = require('express-handlebars');
	var config = require('config');
	var app = express();
	var clientDir = path.join(__dirname, '..', '..', 'ember-app');
	var distDir = path.join(clientDir, 'dist');
	var hbs = exphbs.create({

	import Ember from 'ember';

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

	<!DOCTYPE html>
	<html>
	<head>
	<title>CartoTemplate \| CartoDB</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />

	<style>
	html, body, #map {

	import Ember from 'ember';

	const { inject: { service } } = Ember;

	export default Ember.Controller.extend({
	userState: service('user-state'),
	appName: 'Ember Twiddle',

	actions: {
	duplicate() {

	import Mixin from '@ember/object/mixin';
	import { hash } from 'rsvp';

	export default Mixin.create({
	model(params) {
	let parentRoute = this.get('parentRoute');
	let parentModel = this.modelFor(parentRoute);
	let results = this.data(parentModel, params);

	if (results[parentRoute]) {

	import Ember from 'ember';
	import hbs from 'htmlbars-inline-precompile';


	export default Ember.Component.extend({
	name: 'test',
	layout: hbs`
	<button type='button' onclick={{action test}}>Test</button>
	`,