Skip to content

Instantly share code, notes, and snippets.

@benjuang
Last active April 4, 2022 23:29
Show Gist options
  • Save benjuang/1f36f8cf56714ea101e9188ddcb3bb33 to your computer and use it in GitHub Desktop.
Save benjuang/1f36f8cf56714ea101e9188ddcb3bb33 to your computer and use it in GitHub Desktop.
Test
import Controller from '@ember/controller';
import { action, computed } from '@ember/object';
import { tracked } from '@glimmer/tracking';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
@tracked x = 0;
@tracked y = 0;
@tracked z = 0;
untracked = 0;
untrackedZ = 0;
noGet() {
console.log("noGet called")
return this.x + this.y;
}
get propertyWithGet() {
console.log("propertyWithGet called")
return this.x + this.y;
}
@computed('x')
get getWithComputedX() {
console.log("getWithComputedX called")
return this.x + this.y;
}
@computed('x','y')
get getWithComputedXY() {
console.log("getWithComputedXY called")
return this.x + this.y;
}
@action incrementX() {
this.x += 1;
}
@action incrementY() {
this.y += 1;
}
@action incrementZ() {
this.z += 1;
}
@action incrementUntracked() {
// this.untracked += 1; // This will throw an assertion error
this.set("untracked", this.untracked + 1);
}
@action incrementUntrackedZ() {
this.untrackedZ += 1; // This will throw an assertion error
console.log("this.untrackedZ", this.untrackedZ);
}
}
<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
{{outlet}}
X: {{x}}<br/>
Y: {{y}}<br/>
Z: {{z}}<br/>
noGet: {{noGet}}<br/>
propertyWithGet: {{propertyWithGet}}<br/>
getWithComputedX: {{getWithComputedX}}<br/>
nextIndexWithComputedXY: {{nextIndexWithComputedXY}}<br/>
<button {{on "click" this.incrementX}}>+1 X</button>
<button {{on "click" this.incrementY}}>+1 Y</button>
<button {{on "click" this.incrementZ}}>+1 Z</button>
<hr/>
Untracked: {{untracked}}<br/>
<button {{on "click" this.incrementUntracked}}>+1 Untracked</button>
<button {{on "click" this.incrementUntrackedZ}}>+1 UntrackedZ</button>
<br>
<br>
{
"version": "0.17.1",
"EmberENV": {
"FEATURES": {},
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
"_APPLICATION_TEMPLATE_WRAPPER": true,
"_JQUERY_INTEGRATION": true
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
"ember": "3.18.1",
"ember-template-compiler": "3.18.1",
"ember-testing": "3.18.1"
},
"addons": {
"@glimmer/component": "1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment