배열 업데이트 및보기 변경, AureliaJS

Question

그냥 AureliaJS, 매우 흥미로운 프레임 워크에있어.
나는 간단한 tic tac toe 게임을 구현하려고하는데, 내가 잘못하고있는 것을 알아낼 수 없다.

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()