Question

默认情况下应该是带有文本区域框的已选中单选按钮。当选中第二个单选按钮时，必须使用带有值的下拉列表替换文本区域框。我的代码位于

下面

<div>
  <label><input type="radio" name="billingcustname" value="new" id="billingcustname_0" checked="checked">New </label>
        {{#if showNewCustomer}}
            {{> newcustomer}}
        {{else}}
            {{> existingcustomer}}
        {{/if}}
  <label><input type="radio" name="billingcustname" value="existing" id="billingcustname_1">Existing</label>
</div>
<template name="newcustomer">
  <input type="text" class="form-control newCust" placeholder="Customer Name">
</template>

<template name="existingcustomer">
<select id="dropdown" class="form-control existCust">
    <option value="0" disabled="">Please select</option>        
    <option value="1800FLOWERS BPO AUTOMATION" selected="">1800FLOWERS AUTOMATION</option>      
</select>
</template>

Answer 1

尝试在帮助程序中使用Session来填充<select>。最好的是它们是被动的，所以你会得到你的“即时”效果。

<select id="dropdown">
  {{#each options}}
    <option value="{{this}}">{{this}}</option>
  {{/each}}
</select>

Template.name.helpers({
 options: function() {
   return Session.get('options_from_radio');
 }
});

Template.name.events({
  'click #billingcustname_0': function() {
    var new_options = ['value1', 'value2', 'value3'];
    Session.set('options_from_radio', new_options);
  }
});

当然，上面的代码可以通过默认添加会话数组来改进，在数组中设置对象（用于值和文本）而不是像[{value="ch1", text="Choose me first"}, {...}, {...}]等字符串。

Answer 2

@Radu走在正确的轨道上。

为设置Session var
添加获取Session var

要在单选按钮上设置事件，您还需要将html包装在模板中（总是很好的练习，你应该在模板之外使用零html）。

<强> HTML：

<template name="selector">
  <div>
    <label><input type="radio" name="billingcustname" value="new" id="billingcustname_0" checked="checked">New </label>
    {{#if showNewCustomer}}
      {{> newcustomer}}
    {{else}}
      {{> existingcustomer}}
    {{/if}}
    <label><input type="radio" name="billingcustname" value="existing" id="billingcustname_1">Existing</label>
  </div>
</template>

<强> JS：

Template.selector.events({
  'click #billingcustname_0': function() {
    Session.set('showNewCustomer',true);
  },
  'click #billingcustname_1': function() {
    Session.set('showNewCustomer',false);
  }
});

Template.selector.onRendered(function(){
    Session.set('showNewCustomer',true);
});

Template.selector.helpers({
  showNewCustomer: function(){
    return Session.get('showNewCustomer');
  }
});

就个人而言，这似乎是很多简单的代码。我很想恢复到jQuery，只需在点击单选按钮时切换页面元素的可见性。

尝试在选择单选按钮时填充下拉列表

2 个答案: