This page is part of a static HTML representation of TriTarget.org at https://tritarget.org

Ember Counter Helper

Sukima28th April 2022 at 2:17pm

Helper

import { helper } from '@ember/component/helper';
import { tracked } from '@glimmer/tracking';

export class Counter {
  @tracked value;
  inc = () => ++this.value;
  dec = () => --this.value;
  set = (value) => (this.value = value);

  constructor(value = 0) {
    this.value = value;
  }
}

export default helper(([value]) => new Counter(value));

Usage

{{#let (counter) as |count|}}
  <button
    type="button"
    {{on "click" count.inc}}
  >
    Increment
  </button>
  <button
    type="button"
    {{on "click" count.dec}}
  >
    Decrement
  </button>
  <p>{{count.value}}</p>
{{/let}}