Learn EMBER-JS with Real Code Examples

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class CounterComponent extends Component {
    @tracked count = 0;
    @tracked isDark = false;

    @action increment() { this.count++; }
    @action decrement() { this.count--; }
    @action reset() { this.count = 0; }
    @action toggleTheme() { this.isDark = !this.isDark; }
}

<!-- counter.hbs -->
<div class={{if this.isDark 'dark-theme' 'light-theme'}}>
    <h2>Counter: {{this.count}}</h2>
    <div>
        <button {{on 'click' this.increment}}>+</button>
        <button {{on 'click' this.decrement}}>-</button>
        <button {{on 'click' this.reset}}>Reset</button>
    </div>
    <button {{on 'click' this.toggleTheme}}>Switch Theme</button>
</div>

Basic Ember.js counter with dark/light theme toggle.

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class StepCounterComponent extends Component {
    @tracked count = 0;
    @tracked step = 2;

    @action increment() { this.count += this.step; }
    @action decrement() { this.count -= this.step; }
    @action reset() { this.count = 0; }
}

<!-- step-counter.hbs -->
<h2>Counter: {{this.count}}</h2>
<button {{on 'click' this.increment}}>+</button>
<button {{on 'click' this.decrement}}>-</button>
<button {{on 'click' this.reset}}>Reset</button>

Counter increments/decrements by a step value.

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class MaxCounterComponent extends Component {
    @tracked count = 0;
    max = 5;

    @action increment() { if(this.count < this.max) this.count++; }
    @action decrement() { this.count--; }
    @action reset() { this.count = 0; }
}

<!-- max-counter.hbs -->
<h2>Counter: {{this.count}}</h2>
<button {{on 'click' this.increment}}>+</button>
<button {{on 'click' this.decrement}}>-</button>
<button {{on 'click' this.reset}}>Reset</button>

Stops incrementing after reaching a maximum value.

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class AutoResetCounterComponent extends Component {
    @tracked count = 0;
    threshold = 10;

    @action increment() {
        this.count = (this.count + 1 > this.threshold ? 0 : this.count + 1);
    }
    @action decrement() { this.count--; }
    @action reset() { this.count = 0; }
}

<!-- auto-reset-counter.hbs -->
<h2>Counter: {{this.count}}</h2>
<button {{on 'click' this.increment}}>+</button>
<button {{on 'click' this.decrement}}>-</button>
<button {{on 'click' this.reset}}>Reset</button>

Automatically resets when counter exceeds a threshold.

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class HistoryCounterComponent extends Component {
    @tracked count = 0;
    @tracked history = [];

    @action increment() { this.count++; this.history = [...this.history, 'Increment']; }
    @action decrement() { this.count--; this.history = [...this.history, 'Decrement']; }
    @action reset() { this.count = 0; this.history = [...this.history, 'Reset']; }
}

<!-- history-counter.hbs -->
<h2>Counter: {{this.count}}</h2>
<div>History: {{this.history}}</div>
<button {{on 'click' this.increment}}>+</button>
<button {{on 'click' this.decrement}}>-</button>
<button {{on 'click' this.reset}}>Reset</button>

Tracks increment/decrement actions in a history array.

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class DarkCounterComponent extends Component {
    @tracked isDark = false;
    @action toggleTheme() { this.isDark = !this.isDark; }
}

<!-- dark-counter.hbs -->
<div class={{if this.isDark 'dark-theme' 'light-theme'}}>
    <h2>Counter: 0</h2>
    <button {{on 'click' this.toggleTheme}}>Toggle Theme</button>
</div>

Static counter with only theme toggle.

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class AutoIncrementCounterComponent extends Component {
    @tracked count = 0;

    constructor() {
        super(...arguments);
        setInterval(() => { this.count++; }, 1000);
    }
}

<!-- auto-increment-counter.hbs -->
<h2>Counter: {{this.count}}</h2>

Automatically increments counter every second.

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ConditionalThemeCounterComponent extends Component {
    @tracked count = 0;
    @action increment() { this.count++; }
    @action decrement() { this.count--; }
    @action reset() { this.count = 0; }
}

<!-- conditional-theme-counter.hbs -->
<div class={{if (even this.count) 'dark-theme' 'light-theme'}}>
    <h2>Counter: {{this.count}}</h2>
    <button {{on 'click' this.increment}}>+</button>
    <button {{on 'click' this.decrement}}>-</button>
    <button {{on 'click' this.reset}}>Reset</button>
</div>

Theme changes based on even/odd counter value.

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class FullCounterComponent extends Component {
    @tracked count = 0;
    @tracked history = [];
    @tracked isDark = false;
    step = 2;
    max = 10;

    constructor() {
        super(...arguments);
        setInterval(() => {
        let n = this.count + this.step;
        if(n > this.max) n = 0;
        this.count = n;
        this.history = [...this.history, 'Auto Increment'];
        }, 1000);
    }

    @action increment() { let n = this.count + this.step; if(n>this.max)n=0; this.count=n; this.history = [...this.history,'Increment']; }
    @action decrement() { this.count -= this.step; this.history = [...this.history,'Decrement']; }
    @action reset() { this.count = 0; this.history = [...this.history,'Reset']; }
    @action toggleTheme() { this.isDark = !this.isDark; }
}

<!-- full-counter.hbs -->
<div class={{if this.isDark 'dark-theme' 'light-theme'}}>
    <h2>Counter: {{this.count}}</h2>
    <div>History: {{this.history}}</div>
    <button {{on 'click' this.increment}}>+</button>
    <button {{on 'click' this.decrement}}>-</button>
    <button {{on 'click' this.reset}}>Reset</button>
    <button {{on 'click' this.toggleTheme}}>Toggle Theme</button>
</div>

Combines step, max, auto-reset, history, auto-increment, and theme toggle.