Skip to content

Instantly share code, notes, and snippets.

@tehmaestro
Last active January 21, 2021 21:56
Show Gist options
  • Save tehmaestro/95ff5ee832d9788f07519bc9cc97b387 to your computer and use it in GitHub Desktop.
Save tehmaestro/95ff5ee832d9788f07519bc9cc97b387 to your computer and use it in GitHub Desktop.
New Twiddle
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { get } from '@ember/object';
export default class extends Component {
get isCountSet() {
return this.args.object.count;
}
get isTestSet() {
return this.args.test;
}
}
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action, set } from '@ember/object';
export default class extends Component {
@tracked test = false;
constructor() {
super(...arguments);
this.objects = [{id: 1, name: "Alex"}, {id: 2, name: "Vasile"}]
}
@action
addCount() {
console.log('count set');
this.test = true;
this.objects.forEach((object) => {
set(object, "count", Math.random());
});
}
}
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
}
<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
<Parent />
<br>
<br>
<div>Hi, I'm the child for {{@object.name}}</div>
<small>Count is {{@object.count}}</small>
<div>Is count set?
{{#if isCountSet}}
true
{{else}}
false
{{/if}}
</div>
<div>Is TEST set?
{{#if isTestSet}}
true
{{else}}
false
{{/if}}
</div>
<br/>
<div>Hi, I'm the parent</div>
<buton {{on "click" this.addCount}}>Click to set random counts</buton>
<br/>
<br/>
{{#each objects as |object|}}
<Child @object={{object}} @test={{test}} />
{{/each}}
{
"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