更新数组并更改视图，AureliaJS

刚进入AureliaJS，非常有趣的框架。
我试图实现一个简单的井字游戏，但我不知道我做错了什么

App.js：

export class App {
    constructor() {
        this.heading = 'Tic-Tac-Toe';
        this.board = ["", "", "", "", "", "", "", "", ""];
        this.playerOne = 'X';
        this.playerTwo = 'O';
        this.currentPlayer = this.playerOne;
    }

    makeTurn(index) {
        if(this.board[index] === "") {
            this.board[index] = this.currentPlayer;
            this.currentPlayer = this.currentPlayer === this.playerOne ? this.playerTwo : this.playerOne;
            console.log(this.board);
        }
    }
}

App.html：

<template>
    <require from="style.css"></require>
    <h1>${heading}</h1>

    <div class="board">
        <div repeat.for="sqare of board" class="sqare" click.trigger="makeTurn({$index}.$index)">${sqare}</div>
    </div>
</template>

${heading}
${sqare}

---

例如，如果我尝试更改makeTurn函数中的heading变量，它确实会更改heading，因此我不明白为什么更新数组不会同时更新视图。

事实上，这似乎是预期的（） 解决此问题的一种快速方法是创建阵列的浅层副本

this.board = this.board.slice()

您可以尝试在makeTurn函数中单击.trigger=“makeTurn（$index）”和console.log（'makeTurn'，index）以查看是否触发该命令吗？