Question

这是模板：

<template name="TestRadio">
 <form class="form-horizontal">
   <div class="form-group">
     <label for="radio" class="control-label">Show/Hide</label>
     <label class="radio-inline">
       <input type="radio" name="showhide" id="show" value="show" checked> Show
     </label>
     <label class="radio-inline">
       <input type="radio" name="showhide" id="hide" value="hide"> Hide
     </label>
   </div>
   {{#if show}}
   <div class="form-group">
     <label for="something" class="control-label">Something</label>
     <input type="text" class="form-control" id="something">
   </div>
   {{/if}}
 </form>
</template>

这是帮助者：

Template.TestRadio.helpers({
  show: function() {
    var type = $('[name=showhide]:checked').val();
    return type === 'show';
  },
});

因此，如果无线电值发生变化，助手show也应该改变。那么input something也应该显示/隐藏。

但它不起作用。

Answer 1

问题是，您告诉您的模板显示Something 如果您的广播已选中，而不是时选中它。你需要一个活动。

Template.TestRadio.onRendered(function () {
  Session.set('show', false);
});

Template.TestRadio.events({
  'change #hide": function (e) {
    Session.set('show', false);
  },
  'change #show': funciton (e) {
    Session.set('show', true);
  }
});

Template.TestRadio.helpers({
  show: function() {
    return Session.get('show');
  },
});

根据无线电点击显示/隐藏内容

1 个答案: