Aurelia: Refresh-Ansicht mit einem Map-Wert

Question

Im Viewmodel habe ich eine Karte, die alle 5 Sekunden aktualisiert wird:

Constructor(){ 
     this myMap=new Map(); 

    } 
    activate(){ 
     //for example : 
     value=7; 
     id=1; 
     setInterval(()=>{ 
      this.myMap.set(id, value++); 
      }); 
     },5000); 
    } 

Nach Ansicht:

<template> 
    <div class="container"> 
    <h2>${titre}</h2> 
    <p class="nb-values-OK"> 
    ${myMap.get(1)} 
    </p> 
    </div> 
</template> 

Nichts passiert, wenn Intervall auslöst ... Gibt es eine Möglichkeit, meine Ansicht zu aktualisieren, wenn der Timer ausgelöst wird?

Tatsächlich in der realen Welt habe ich Spuren und auf diesen Spuren gibt es einige Aktivitäten; Also meine Karte die Verbindung zwischen einer Spur-ID und der Anzahl der Aktivitäten, die auf dieser Spur stattfinden. Es scheint mir, dass eine Karte der einfachste Weg ist, um das zu sortieren ... Wie auch immer, meine erste Frage betrifft die Art und Weise, wie meine Sicht alle 5sec aktualisiert wird.

Vielen Dank im Voraus für jede Hilfe. `

(Ich hoffe, mein Englisch ist gut genug, um verständlich zu sein :)).

Answer 1

Sie benötigen bind(this) in Callback-Funktionen für den Zugriff inneren Modelldaten verwenden wie this.myMap:

Constructor(){ 
    this myMap=new Map(); 
} 

activate(){ 
    //for example : 
    value=7; 
    id=1; 
    setInterval(function(){ 
     this.myMap.set(id, value++); 
    }.bind(this), 5000); 
} 

Wenn Sie komplexe Daten OBSERV und aktualisieren müssen, dann können Sie many bindable behaviors verwenden. Einfachste Lösung - mit dem Signal api (bindable Wert anzuzeigen wird jedes Mal aktualisiert wird, dann senden Sie spezielles Signal):

model.js:

import {inject} from 'aurelia-dependency-injection'; 
import {BindingSignaler} from 'aurelia-templating-resources'; 

@inject(BindingSignaler) 
export class SampleView { 

    constructor(signaler) { 
    this.signaler = signaler; 
    } 

    activate() { 
    this.data = new Map(); 
    this.data.set(1, 1); 

    // data changing by interval and send update signal 
    setInterval(function(){ 
     this.data.set(1, this.data.get(1) + 1); 
     this.signaler.signal('need-update'); 
    }.bind(this), 1000); 
    } 
} 

model.html

<template> 
    <h1>${data.get(1) & signal:'need-update'}</h1> 
</template> 

PS

Auch für benutzerdefinierte Eigenschaft oder Ausdruck Beobachter können Sie BindingEngine verwenden (erstellen Sie Ereignisse auf Ihrer Karte Wert ändern). Siehe Beispiel in diesem Thema: Property change subscription with Aurelia

auch Sie expressionObserver von BindingEngine versuchen können (beobachten Array oder „innerer“ Objektwert): https://stackoverflow.com/a/33482172/1276632