Метеор хелперы не действует, как ожидалось

Question

HTML

<input class="esInput"></input> 

<ul class="search-bottom {{toggleSearchBottom}}> 
    <li>sthsth</li> 
    <li>sthsth</li> 
    and so on 
</ul> 

JS

Template.search.helpers({ 
    toggleSearchBottom: function(){ 
     if($('.esInput').val().length == 0){ 
      return ''; 
     } 
     if($('.esInput').val().length >= 1){ 
      return 'hidden-tn hidden-xxs hidden-xs'; 
     } 
    } 
}) 

Это мой код. Когда я ввожу что-то в .esInput, второй оператор if не будет активирован. Amd Я делаю что-то неправильно? Когда я console.log .val.length(), я получаю правильный номер. (0, когда ничего, 1 или больше при вводе).

Я пытаюсь скрыть элемент, когда ввод имеет значение.

Answer 1

Я не специалист по метеору, но я думаю, что знаю, что пошло не так. Вы заметите, что функция toggleSearchBottom вызывается только один раз. Когда загрузка страницы будет запускаться один раз, класс будет назначен, и все.

Метеор не может знать, что вы хотите вызвать эту функцию каждый раз, когда значение поля EnInput изменилось. Это может быть немного запутанным, потому что Meteor настолько умна при работе с сеансами и коллекциями, но эти автоматические привязки не работают для произвольной DOM.

Вам понадобится немного другой подход, я создал пример MeteorPad. Но это ядро ​​решения:

Template.body.events({ 
    "keyup .esInput": function(event) { 
     if($(event.target).val().length > 0) { 
     $("#state").addClass("hide"); 
     } else 
     { 
     $("#state").removeClass("hide"); 
     } 
    } 
});