更新數組並更改視圖，AureliaJS

Question

剛進入AureliaJS，非常有趣的框架。
我想實現一個簡單的tic tac腳趾遊戲，但我無法弄清楚我做錯了什麼。

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> 

如果我試圖改變例如標題變量在makeTurn功能它不改變航向，所以我不得到爲什麼更新數組並不會更新視圖。

Answer 1

似乎它實際上是預期（https://github.com/aurelia/framework/issues/431） 一個快速的方法來解決這個問題是創建數組的一個淺表副本

this.board = this.board.slice()