流星助手没有按预期行事

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 语句将不会被激活。我做错了吗？当我控制台记录.val.length() 时，我得到了正确的号码。 （0 表示什么都没有，1 或更多表示输入）。

当输入有值时，我试图隐藏元素。

Answer 1

我不是流星专家，但我想我知道这里出了什么问题。 您会注意到函数 toggleSearchBottom 仅被调用一次。当页面加载它会触发一次，类将被分配，就是这样。

Meteor 无法知道每次 esInput 字段的值发生变化时您要触发此函数。 这可能有点令人困惑，因为 Meteor 在处理会话和集合时非常聪明，但这些自动绑定不适用于任意 DOM。

您将不得不采取一些不同的方法，我创建了一个 MeteorPad 并带有一个示例。但这是解决方案的核心：

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