流星助手的作用与预期不同

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键入.esInput ，第二个if语句将不会被激活。 我做错了吗？ 当我console.log .val.length() ，我得到了正确的数字。 （无则为0，键入时为1或更多）。

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

Answer 1

我不是流星专家，但我想我知道哪里出了问题。 您会注意到，功能toggleSearchBottom仅被调用一次。 页面加载后，它将触发一次，然后将分配类。

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

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

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