禁用 <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總是更好。 使用模板實例可使您輕松編寫可重用的組件。