Array aktualisieren und die Ansicht ändern, AureliaJS

Question

Gerade in AureliaJS, sehr interessanter Rahmen.
Ich versuche, ein einfaches Tic Tac Toe Spiel zu implementieren, aber ich kann nicht herausfinden, was ich falsch mache.

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> 

Wenn ich versuche, zum Beispiel zu ändern, um die Überschrift Variable in der Funktion Maketurn ist es die Überschrift ändern, damit ich nicht Warum aktualisieren ein Array die Ansicht nicht auch aktualisiert.

Answer 1

Es scheint es in der Tat (https://github.com/aurelia/framework/issues/431) Eine schnelle Möglichkeit, dies zu beheben eine flache Kopie ist die Schaffung des Arrays

erwartet wird

this.board = this.board.slice()