Last active
January 22, 2021 14:01
-
-
Save tehmaestro/4b683682b5f533f1bec3522ae9b3d5f9 to your computer and use it in GitHub Desktop.
New Twiddle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Component from '@glimmer/component'; | |
import { get, set, computed } from '@ember/object'; | |
export default class extends Component { | |
// Why does this work? Isn't it like A.? | |
get firstArrayObject() { | |
return this.args.myArray[0]; | |
} | |
// A. This does not work | |
// I believe this is because we need to let the getter know about the dependency. Using `set` is not enough | |
get firstArrayObjectCount() { | |
return this.args.myArray[0].count; | |
} | |
// B. This works. | |
//I believe it is because using `get`, we let the getter know that there is a dependency in there | |
/** | |
get firstArrayObjectCount() { | |
return get(this.args.myArray[0], 'count'); | |
} | |
**/ | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Component from '@glimmer/component'; | |
import { action, set, get } from '@ember/object'; | |
import { tracked } from '@glimmer/tracking'; | |
export default class extends Component { | |
myArray = [{count: 0}, {count: 0}]; | |
@action | |
doSomething() { | |
set(this.myArray[0], 'count', this.myArray[0].count + 1); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Controller from '@ember/controller'; | |
export default class ApplicationController extends Controller { | |
appName = 'Ember Twiddle'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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