t4t5

Verifying that +tristan is my Bitcoin username. You can send me #bitcoin here: https://onename.io/tristan

t4t5

Verifying that "tristan.id" is my Blockstack ID. https://onename.com/tristan

t4t5

// src/ui/components/todo-list/component.ts

import Component from "@glimmer/component";

export default class TodoList extends Component {

  items = [
    {
      text: "Install Glimmer",
      isDone: false,

t4t5

{{! src/ui/components/todo-list/template.hbs }}

<div id="todo-app">

  <ul>
    {{#each items key="@index" as |item|}}
      <li>
        {{item.text}}
      </li>
    {{/each}}

t4t5

{{! src/ui/components/todo-item/template.hbs }}

<li>
  <p>
    {{@item.text}}
  </p>

  <button>
    Delete item
  </button>

t4t5

{{! src/ui/components/todo-list/template.hbs }}

<div id="todo-app">

  <ul>
    {{#each items key="@index" as |item|}}
      <todo-item
        @item={{item}}
      />
    {{/each}}

t4t5

// src/ui/components/todo-list/component.ts

import Component, { tracked } from "@glimmer/component";

export default class TodoList extends Component {

  @tracked newItemText = '';

  @tracked items = [
    {

t4t5

{{! src/ui/components/todo-item/template.hbs }}

<li>
  <p 
    data-checked={{@item.isDone}}
    onclick={{action @toggleItem @item}}
  >
    {{@item.text}}
  </p>

t4t5

// src/ui/components/todo-item/component.ts

import Component from '@glimmer/component';

export default class TodoItem extends Component {

  delete() {
    let item = this.args.item;
    this.args.deleteItem(item);
  }

t4t5

{{! src/ui/components/todo-list/template.hbs }}

<div id="todo-app">

  <ul>
    {{#each items key="@index" as |item|}}
      <todo-item
        @item={{item}}
        @deleteItem={{action deleteItem}}
        @toggleItem={{action toggleItem}}