Question

我正在寻找一种通过dropbox启用/禁用多个控件（textarea，checkbox）的有效方法。即在Dropbox中选择项目A将禁用某些控件，而在Dropbox中选择项目B将禁用其他一些控件。关于我如何处理禁用文本框的代码：

HTML：

<template name="Gender">
<input  disabled={{shouldBeDisabled}} class="input" type="text"/>
</template>

<template name="DoB">
<textarea rows="3" cols="27" disabled={{shouldBeDisabled}}>purpose</textarea>
</template>

js：

Template.registerHelper("shouldBeDisabled", function() {
  return true
});

问题1：我们是否需要为每个控件提供 registerHelper 功能？在上面的代码中，似乎registerhelper将禁用或启用两个控件，而不是个人，但是有多个registerhelper似乎是多余的。

问题2：我们如何通过Dropbox（即select）控制registerHelper中的值？我可以从dropbox返回值，正在构建一个内部的switch，以正确的方式，它如何合并到问题1？

问题3：是否有内置函数可以在禁用的控件上添加视觉效果？（即格外）

Answer 1

我在过去使用Meteor和Blaze的方式是在下拉列表上设置一个事件监听器，它设置一个响应式var / session变量，然后我在一个帮助器中读取。帮助器将返回字符串＆＃34;禁用＆＃34;取决于价值。

例如（这是来自记忆......我现在无法访问Meteor，我已切换到React / Mantra）：

Template.MyComponent.oncreated(function() {
  this.isDropdownDisabled = new ReactiveVar();
});

Template.MyComponent.events({
  'change #myDropdown'(event) {
    this.isDropdownDisabled.set($('#myDropdown').val() == 'Selected' ? true : false);
  }
});

Template.MyComponent.helpers({
  isDropdownSelected() {
    return this.isDropdownDisabled.get() == true ? '' : 'disabled';
  }
});

<select id="myDropdown">
  <option value="Not Selected">Not Selected</option>
  <option value="Selected">Select Me</option>
</select>

<input id="myDynamicallyDisabledInput" type="textbox" name="dnyamic1" {{isDropdownSelected}} />

这应该大致正确。基本思想是你使用一个被动变量来存储＆＃34;状态＆＃34;下拉值，翻转＆＃34;状态＆＃34;当该值发生更改时，在输入中使用帮助以确定是否需要设置disabled属性。由于辅助函数默认是反应性的，因此交换状态var将导致模板在下拉值更改时重新进行评估。

任何人都可以随意编辑此响应以清除上面的任何错误代码，因为我还没有在一段时间内使用过Blaze而且我是从内存中完成的。

正确的方法来禁用多个Textarea /复选框取决于下拉框的值

1 个答案: