流星助手没有按预期行事

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 语句将不会被激活。我做错了什么吗？当我 console.log 和 .val.length() 时，我得到了正确的数字。（0 时什么都没有，1 或更多时键入）。

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

Answer 1

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

每次 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");
      }
    }
});

流星助手没有按预期行事

Meteor helpers not acting as expected

javascript

jquery

meteor

helpers