Wann wird die Bindung an das Attribut ref in Aurelia gültig?

Question

Dies ist ein folgen auf diese Frage: Access a DOM element in Aurelia

Gibt es einen Haken in der Lifecycle-Bildschirm Aktivierung, die ich haben Code nachref Bindungen laufen zu lassen eingerichtet? Momentan scheint es eine Zeitperiode zu geben, nachdem der activate Hook aufgerufen wird, wenn die ref Bindungen noch nicht eingerichtet sind und sie dann irgendwann aktiviert werden. Getestet habe ich diese durch eine <div ref="myDiv"></div> bis nahe dem Boden des welcome.html in einer geklonten Version des neuesten (v0.13.0) Skelett-Navigation Repo- und die Prüfung der Existenz der Referenz in der View-Modell wie folgt ergänzt:

export class Welcome{ 
    heading = 'Welcome to the Aurelia Navigation App!'; 
    firstName = 'John'; 
    lastName = 'Doe'; 

    testMyDiv() { 
    console.log("Getting my div") 
    console.log(this.myDiv) 
    } 

    get fullName(){ 
    this.testMyDiv() 
    return `${this.firstName} ${this.lastName}`; 
    } 

    welcome(){ 
    alert(`Welcome, ${this.fullName}!`); 
    } 
} 

ein Ausschnitt aus der Unterseite der Vorlage ...

 <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
    <div ref="myDiv"></div> 
    </section> 
</template> 

Dies ist ein Überblick von dem, was ich in der Konsole sehen ...

welcome.js:10 Getting my div 
welcome.js:11 undefined 
welcome.js:10 Getting my div 
welcome.js:11 undefined 
welcome.js:10 Getting my div 
welcome.js:11 <div ref=​"myDiv" class=​"au-target">​</div>​ 
welcome.js:10 Getting my div 
welcome.js:11 <div ref=​"myDiv" class=​"au-target">​</div>​ 
(continues) 

die Ausdrucke wie th es geht endlos weiter. Sie können sehen, dass fullName() wird regelmäßig aufgerufen, um den Bildschirm zu aktualisieren, wenn der Name ändert (ich nehme an, dies ist die Prüfung schmutzig) ... aber Sie können sehen, dass am Anfang gibt es einen Zeitraum, wenn die referenzierte div ist nicht gültig als a Eigenschaft des View-Modells, und dann ist es gültig. Kann jemand das erklären? Gibt es eine Möglichkeit, in das View-Modell einzuhaken, nachdem die ref gültig geworden ist?

Answer 1

Im Allgemeinen werden Bindungen verarbeitet und sind nach dem Rückruf bind verfügbar. Da Sie jedoch in diesem Fall auf das DOM-Element zugreifen müssen, müssen Sie das ViewModel an die Ansicht gebunden und anhängen. Verwenden Sie daher den Rückruf attached.

class ViewModel { 

    bind() { 
     this.refItem == undefined; // true 
    } 

    attached() { 
     this.refItem == undefined; // false 
    } 
} 

Wie Sie in den Kommentaren erwähnt, weitere Informationen zu den Aktivator Rückrufe finden Sie hier: http://aurelia.io/docs.html#extending-html