Skip to content

Instantly share code, notes, and snippets.

@rtablada
Created March 13, 2019 03:33
Show Gist options
  • Save rtablada/f23c95026ccd73f602b428c3e52b0e2d to your computer and use it in GitHub Desktop.
Save rtablada/f23c95026ccd73f602b428c3e52b0e2d to your computer and use it in GitHub Desktop.
<p>{{value}}</p>
<button {{action "goUp"}}>Click</button>
import Component from '@ember/component'
export default Component.extend({
tagName: 'nav',
classNames: 'my-counter',
attributeBindings: ['data-test-selector'],
'data-test-selector': 'counter',
value: 0, // This could collide with an existing component property though 🤷🏽‍♂️
actions: {
goUp() {
this.set('value', this.get('value') + 1);
}
}
});
<nav ...attributes class="my-counter" data-test-selector="counter">
<p>{{this.value}}</p>
<button onclick={{this.goUp}}>Click</button>
</nav>
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class MyCounter extends Component {
@tracked value = 0; // No collisions since glimmer component only has a small number of methods/properties
goUp = () => this.value ++;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment