從 Aurelia 中的父組件更新可觀察集合

Question

為了更好地理解 Aurelia 組件之間的交互，我將 Aurelia快速入門文檔中的 Todo List 應用程序的列表組件分離為它自己的類和相應的視圖。 但是這樣做會導致在將新元素添加到列表時視圖不會更新。

我修改后的代碼如下：

應用程序.html：

<template>
  <require from="./todo-list"></require>
  <h1>Todo list</h1>
  <form submit.trigger="addTodo()">
    <input type="text" value.bind="todoDescription">
    <button type="submit" disabled.bind="!todoDescription">Add Todo</button>
  </form>
  <todo-list></todo-list>
</template>

應用程序.ts：

import { TodoList } from "todo-list";
export class App {
  todoList: TodoList = new TodoList();
  todoDescription = '';

  addTodo() {
    if (this.todoDescription) {
      this.todoList.addOne(this.todoDescription);
      this.todoDescription = '';
    }
  }
}

待辦事項列表.html

<template>
  <ul>
    <li repeat.for="todo of todos">
      <input type="checkbox" checked.bind="todo.done">
      <span css="text-decoration: ${todo.done ? 'line-through' : 'none'}">
        ${todo.description}
      </span>
    </li>
  </ul>  
</template>

待辦事項列表.ts：

export interface Todo {
  description: string;
  done: boolean;
}

export class TodoList {
  todos: Todo[] = [
    { description: "Make bed", done: true },
    { description: "Take out trash", done: false }
  ];

  addOne(todoDescription: string) {
    this.todos.push({
      description: todoDescription,
      done: false
    });
  }
}

原始的工作代碼如下：

應用程序.ts：

export interface Todo {
  description: string;
  done: boolean;
}

export class App {
  todos: Todo[] = [
    {description: "Make bed", done: true}, 
    {description: "Take out trash", done: false}
  ];
  todoDescription = '';

  addTodo() {
    if (this.todoDescription) {
      this.todos.push({
        description: this.todoDescription,
        done: false
      });
      this.todoDescription = '';
    }
  }
}

應用程序.html：

<template>
  <h1>Todo list</h1>

  <form submit.trigger="addTodo()">
    <input type="text" value.bind="todoDescription">
    <button type="submit" disabled.bind="!todoDescription">Add Todo</button>
  </form>

  <ul>
    <li repeat.for="todo of todos">
      <input type="checkbox" checked.bind="todo.done">
      <span css="text-decoration: ${todo.done ? 'line-through' : 'none'}">
        ${todo.description}
      </span>
      <button click.trigger="removeTodo(todo)">Remove</button>
    </li>
  </ul>
</template>

調試顯示，類分離后， todos數組確實更新了，但是視圖沒有。

如何修改現有代碼，以便在將新元素添加到待辦事項列表時，相應地更新視圖？

Answer 1

Aurelia 在看到元素時會創建一個 TodoList 實例。 當您“更新”它時，您已經創建了一個單獨的實例。 您應該使用 view-model.ref 來捕獲對 aurelia 創建的實例的引用，而不是創建 TodoList 類的新實例。

應用程序.html

<template>
  <require from="./todo-list"></require>
  <h1>Todo list</h1>
  <form submit.trigger="addTodo()">
    <input type="text" value.bind="todoDescription">
    <button type="submit" disabled.bind="!todoDescription">Add Todo</button>
  </form>
  <todo-list view-model.ref="todoList"></todo-list>
</template>

應用程序.ts

import { TodoList } from "todo-list";
export class App {
  todoList: TodoList;
  todoDescription = '';

  addTodo() {
    if (this.todoDescription) {
      this.todoList.addOne(this.todoDescription);
      this.todoDescription = '';
    }
  }
}