单击时禁用 <li> 元素答案

【问题标题】：disable <li> element upon click单击时禁用 <li> 元素
【发布时间】：2015-08-13 19:06:07
【问题描述】：

我有一个事件函数'click .category'，只要点击<li class="category">，就会调用它。它是下拉列表中的一个元素，特别是来自 Bootstrap 的一个元素。我真的被困在如何通过将'disabled' 类添加到<li> 来禁用该元素。我知道在 jQuery 中你只需要执行一个简单的函数，比如.addClass。 Meteor/Blaze 有没有办法做到这一点？

【问题讨论】：

Meteor 包含 jQuery 并依赖它来操作 DOM，所以请继续在您的事件处理程序中执行正常的$('.category').addClass('disabled')。
jQuery 已经加载了流星，为什么不使用它呢？如果你真的想经历一些麻烦，你可以设置一个助手来设置类，如<li class="{{your_helper}}">。有很多方法可以实现这一点，但同样，jQuery 是轻量级的，并且默认情况下已经加载。
哦，我认为使用 Meteor 的工具会更好。那我就去用吧！

标签： javascript meteor meteor-blaze

【解决方案1】：

你尝试过类似下面的方法吗？

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

【讨论】：

是的，我有，但没用。我意识到'category' 类有多个元素，所以也许这就是我无法禁用任何东西的原因？我最终不得不使用一个 id 来让它工作，但我仍在探索选项，因为为这个功能使用 10-15 个不同的 id 似乎有点荒谬。有没有一种简单的方法来定位当前班级 event 所在的班级？我试过event.currentTarget 无济于事。
This 可能会有所帮助：

【解决方案2】：

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

HTML

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

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。使用模板实例可以让您轻松编写可重用的组件。

【讨论】：

这不是标准的，这很复杂。