禁用 <li> 点击后的元素

Question

我有一个事件函数'click .category' ，每当'click .category' <li class="category">时，都会调用该函数。 它是下拉列表中的一个元素，特别是Bootstrap中的一个。 我真的对如何通过在<li>添加'disabled'类来禁用该元素感到<li> 。 我知道在jQuery中，您只会执行一个简单的函数，例如.addClass 。 流星/火焰有没有办法做到这一点？

Answer 1

您是否尝试过以下类似方法？

Template.myTemplateName.events({
  "click .category": function(event, template){
    event.preventDefault();
    $('.category').addClass('disabled');
  }
});

Answer 2

这是使用ReactiveVar实现此目标的标准流星方法。

的HTML

<template name="category">
  <li class="category {{disabled}}">
    {{! category HTML}}
  </li>
</template>

JS

Template.category.onCreated(function(){
  this.disabled = new ReactiveVar(false);
});

Template.category.helpers({
  disabled: function(){
    var disabled = Template.instance().disabled.get();
    return disabled ? "disabled" : "";
  }
});


Template.category.events({
  "click .category": function(event, template){
    var disabled = template.disabled.get();
    template.disabled.set(!disabled);
  }
});

让Meteor模板渲染引擎（Blaze）为您操纵DOM总是更好。 使用模板实例可使您轻松编写可重用的组件。