在aurelia中使用另一个兄弟组件更新组件时如何更新UI

Question

在导航栏类中，我尝试调用 TodoList 类 addTodoToList 方法来添加待办事项，但待办事项附加在 Todo 类的项目数组中，但未以列表形式显示在 UI 上。如果我对待办事项类中的项目进行编码，它们就会出现在列表中。我无法理解这个问题。

导航栏类

import {autoinject, bindable} from 'aurelia-framework';
import {Router} from 'aurelia-router';
import { TodoList } from 'components/TodoList/todo-list';

@autoinject
export class navbar {
    // Binding it with the newItem of the action-area class to access it
    @bindable public newItem: string;
    // items: string[];

    constructor(private router: Router, private todos: TodoList) {
        // this.items = [];
    }

    // Basic logout functionality
    logout(): void {
        console.log('logout clicked');
        this.router.navigate("");
    }

    // Adds todo to the todo-list
    addTodo(): void {
        const todoText = this.newItem; 
        if(todoText === undefined || todoText === '') {
            alert("Please enter the valid Todo");
        } else {
            // this.items.push(todoText);
            this.todos.addTodoToList(todoText);
            this.newItem = '';
        }
    }


    deleteTodo() {}

    updateTodo() {}
}

todo-list.ts 类

import {autoinject, BindingEngine} from 'aurelia-framework';

@autoinject
export class TodoList {
    items: string[];

    constructor() {
        this.items = [];
    }

    addTodoToList(todoText: string): void {
        this.items.push(todoText);
        console.log(this.items)
    }
}

todo-list.html

<template>
    <ul>
        <li repeat.for="item of items">
           ${item}
        </li>
    </ul>
</template>

Answer 1

在

addTodoToList(item)

类中调用

Navbar

方法不会导致

TodoList

组件渲染视图发生变化的原因是，注入到

todos

类中的

Navbar

对象没有引用渲染的

<todo-list>

组件 ViewModel .

要维护

items

组件的

TodoList

列表，您需要采取以下策略之一：

1. 使用

   <todo-list>

   语法访问渲染的

   view-model.ref="expression"

   组件的引用并将其传递给

   Navbar

   组件 - AURELIA DOCUMENATTION HERE
2. 创建服务来存储待办事项并将其注入到

   Navbar

   和

   TodoList

   组件
3. 使用EventAggregator接口。操作待办事项列表时，在 navbar 组件中

   发布事件

   ，并在 TodoList 组件中

   订阅这些事件

根据您提供的稀缺信息，我建议解决方案 2 - 创建单独的服务来存储物品，同时作为单一事实来源。