mehulkar

import Controller from '@ember/controller';

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

	get myProp() {
		return true;
	}
}

mehulkar

{{log "Colocated this: " this}}
<h1>ColocatedTemplate Only Component</h1>

mehulkar

<p>Open Webkit Inspector in Safari, and see that both the jpg and png sources are downloaded.</p>


<picture>
  <source srcset="https://is3-ssl.mzstatic.com/image/thumb/Purple113/v4/42/92/7a/42927acc-44b0-62fc-ddd3-8d6199347dbd/pr_source.png/643x0w.jpeg 1x,https://is3-ssl.mzstatic.com/image/thumb/Purple113/v4/42/92/7a/42927acc-44b0-62fc-ddd3-8d6199347dbd/pr_source.png/1286x0w.jpeg 2x" type="image/jpeg">

	<img src="https://is3-ssl.mzstatic.com/image/thumb/Purple113/v4/42/92/7a/42927acc-44b0-62fc-ddd3-8d6199347dbd/pr_source.png/643x0w.png" style="" alt="" height="297" width="643">

</picture>

mehulkar

<div ...attributes>i am tagless</div>

mehulkar

import Component from '@glimmer/component';
import { action, computed, set } from '@ember/object';

export default class extends Component {
  prop1 = 0;

  @computed('prop1')
  get cp() {
    return this.prop1 * 1000;
  }

mehulkar

import Component from '@ember/component';

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

mehulkar

import Controller from '@ember/controller';
import { reads } from '@ember/object/computed';
import { computed } from '@ember/object';

export default Controller.extend({
  appName: 'Ember Twiddle',
  
  foo: reads('bar'),
  
  something: true,

mehulkar

import Controller from '@ember/controller';
import { computed } from '@ember/object';

let counter = 0;

export default Controller.extend({
  appName: 'Ember Twiddle',
  
  foo: 1,
	

mehulkar

import Controller from '@ember/controller';

export default Controller.extend({
	appName: 'Ember Twiddle',
  
 
  get someProp() {
  	return 'hi';
	},
  

mehulkar

import Controller from '@ember/controller';

export default Controller.extend({
  get appName() {
    return 'Ember Twiddle'
  }
})