Listings Hanschke/Ember Octane


Listing 1: Eine Komponente als native Klasse mit Dekoratoren
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { filterBy } from '@ember/object/computed';

class ToDo {
    @tracked createdAt = new Date();
    @tracked doneAt = null;
    @tracked text = '';

    get isDone() {
        return doneAt instanceof Date;
    }

    constructor(text) {
        this.text = text;
    }
}

export default class ToDoListComponent extends Component {
    @tracked todos = [];

    @filterBy('todos', 'isDone', false) pendingTodos;

    @action
    add(event) {
        if (event.key === 'Enter') {
            let text = event.target.value;
            let todo = new Todo(text);

            this.todos.push(todo);
            // Komplexe Datenstrukturen wie Arrays kann Embers State Management
            // nicht in der Tiefe überwachen. In diesen Fällen muss das Framework durch das
            // erneute Setzen der Eigenschaft explizit über die Änderung informiert werden
            this.todos = this.todos;

            event.target.value = '';
        }
    }

    @action
    done(todo) {
        todo.doneAt = new Date();
    }
}

--------

Listing 2: Event Binding durch {{on}} Modifier und Aufruf von Komponenten mithilfe spitzer Klammern
<input {{on "keyup" this.add}} placeholder="Was steht an?">
<ul ...attributes>
    {{! this.pendingTodos ist eine Variable der Komponenten Klasse }}
    {{#each this.pendingTodos as |todo|}}
        <li>
            {{! todo ist eine lokale Variable des each-Blocks }}
            <strong>{{todo.text}}</strong>
            {{! format-date ist ein Template Helfer }}
            (Erstellt am {{format-date todo.createdAt}})
            {{! MyButton ist eine Komponente, onClick ihre Eigenschaft }}
            <MyButton @onClick={{fn this.done todo}} class="success">
                erledigt
            </MyButton>
        </li>
    {{/each}}
</ul>







