禁用 <li> 点击后的元素

Question

I have an events function 'click .category' that is called whenever the <li class="category"> is clicked on. It is an element in a dropdown list, specifically one from Bootstrap. I am really stuck on how to disable that element by adding the 'disabled' class to the <li> . I know in jQuery you would just execute a simple function like .addClass . Is there a way in Meteor/Blaze to accomplish this?

Answer 1

Have you tried something like the below?

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

Answer 2

Here is the standard Meteor way of achieving this using a 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);
  }
});

It's always better to let the Meteor templates rendering engine (Blaze) manipulate the DOM for you. Using template instances lets you easily write reusable components.