Когда привязка к атрибуту ref становится действительной в Aurelia?

Question

Это следование этого вопрос: Access a DOM element in Aurelia

Есть ли крюк в экране активации Lifecycle, который позволяет запускать код послеref переплетов были созданы? В настоящее время кажется, что существует период времени после вызова крюка activate, когда привязки ref еще не настроены, а затем в какой-то момент они активируются. Я испытал это, добавив <div ref="myDiv"></div> почти до дна welcome.html в клонированной версии последней (v0.13.0) каркасно-навигации репо и проверки наличия ссылки на вид-модели, как это:

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}!`); 
    } 
} 

фрагмент из нижней части шаблона ...

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

Это снимок того, что я вижу в консоли ...

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) 

в распечаток, как го продолжается бесконечно. Вы можете видеть, что fullName() вызывается регулярно, чтобы обновить экран, если имя изменено (я предполагаю, что это грязная проверка) ... но вы можете видеть, что в начале есть период, когда ссылочный div НЕ действителен как свойство модели представления, а затем оно действительно. Может кто-нибудь объяснить это? Есть ли способ подключиться к модели просмотра после того, как ref станет действительным?

Answer 1

В целом, привязки обрабатываются и доступны после обратного вызова bind. Однако в этом случае, поскольку вам нужно получить доступ к элементу DOM, вам понадобится привязать ViewModel к и, поэтому используйте обратный вызов attached.

class ViewModel { 

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

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

Как отмечено в комментариях, больше информации о активаторов обратных вызовов доступен здесь: http://aurelia.io/docs.html#extending-html