Как сфокусировать ввод на подписяхReady с использованием FlowRouter в Meteor

Question

Я уже привык к использованию FlowRouter через некоторое время с помощью Iron Router и пытается установить некоторые лучшие практики. Я подписываюсь на свою коллекцию на уровне шаблона.

Раньше я ждал шаблона для визуализации с помощью onRendered, а затем направлен мое поле ввода и прикладной focus(), однако сейчас я пытаюсь только показать свой шаблон в Blaze, когда подписки готовы, используя следующее (пожалуйста, простите Джейд, но я думаю, что это довольно ясно, в данном случае)

template(name="subjectNew") 

    unless Template.subscriptionsReady 
    +spinner 
    else 
    form 
    input(type="text" name="name") 

Поэтому основная идея заключается в том, что до тех пор пока подписок не будут готовы Вертушка шоу. Проблема, с которой я сталкиваюсь, заключается в том, что теперь, даже когда шаблон отображает, фокус не будет применяться. Я пробовал различные методы обертывания его в вызове autorun, но не уверен, что лучший способ попытаться настроить таргетинг на первое поле в сочетании с этим подходом?

Template.subjectNew.onRendered(function() { 
    console.log('rendered'); 
    $('input').first().focus(); 
}); 

Возможно ли это?

Большое спасибо за любые идеи.

Answer 1

Ваш subjectNew считается оказывается даже тогда, когда он только показывает вертушку. Просто совать:

form 
input(type="text" name="name") 

В отдельный шаблон, а затем прикрепить код фокуса к onRendered обработчика этого другого шаблона.

template(name="subjectNew") 
    unless Template.subscriptionsReady 
    +spinner 
    else 
    +myForm 

template(name="myForm") 
    form 
    input(type="text" name="name") 

ЯШ:

Template.myForm.onRendered(function(){ 
    $('input').focus() 
}); 

Answer 2

Я думаю, что использование автозапуска было бы хорошим подходом, но тогда вам придется использовать Tracker.afterFlush(), чтобы подождать, чтобы установить фокус после визуализации формы.

Что-то вроде:

Template.subjectNew.onRendered(function() { 
    this.autorun(() => { 
    if (this.subscriptionsReady()) { 
     Tracker.afterFlush(() => $('input').first().focus()); 
    } 
    }); 
});