Question

在我的页面（html表单）中我有2个选项（单选按钮）。根据我想要显示不同输入字段的用户的选择。这是我的模板。

<template name="main">
  <div class="radio">
    <label>
      <input id="radio1" name="optiontype" type="radio" value="1"> Option1
    </label>
  </div>
  <div class="radio">
     <label>
       <input id="radio2" name="optiontype" type="radio" value="2"> Option1
     </label>
  </div>
  <div>
    {{ > optionTemplate }}
  </div>
</template>

这是我的选项模板

<template name="optionTemplate">
    {{#if option1}}
       <div class="form-group">
         <input type="text" class="form-control" placeholder="enter option1">
       </div>
       <div class="form-group">
         <input type="text" class="form-control =" placeholder="enter option1">
       </div>
    {{/if}}
    {{#if option2}}
       <div class="form-group">
         <input type="text" class="form-control =" placeholder="enter option2">
       </div>
    {{/if}}
</template>

在我的main.js文件中，我有以下代码

Template.main.events({
"click #radio1" :  function(event, template) {
    Template.optionTemplate.option1 = function(){
       return true;
    }

},

"click #radio2" : function (event, template) {
    Template.optionTemplate.option2 = function(){
       return true;
    }
}
});

现在发生的事情就是当我放置

时

Template.optionTemplate.option1 = function(){
       return true;
    }

在Template.main.events之外，然后出现“option if block”中的HTML，但显然这不是我想要的，但是当它放在Template.main.events（{...}）中时，没有任何反应。我想要的是基于用户选择动态插入HTML。如果有人能够澄清为什么会发生这种情况以及解决方案是什么，我将非常感激。感谢。

Answer 1

由于您需要动态HTML插入，因此需要一个反应式数据源。对于您的设置，Session变量（它是一个被动数据源）将是完美的。每当一个被动数据源（你的会话变量）发生变化时，依赖于它的代码将被自动重新计算。

因此，让我们听取对任何单选按钮的更改，并更新会话变量option1和option2，它们会告诉我们是否选中了相应的单选按钮：

Template.main.events({
    "change input[type=radio]" : function (event, template) {
        Session.set("option1", template.find('input:radio[id=radio1]').checked);
        Session.set("option2", template.find('input:radio[id=radio2]').checked);
    }
});

此外，我们将使用全局模板帮助程序，它允许我们使用{{session "mySessionVariable"}}轻松访问HTML中的任何会话变量：

Handlebars.registerHelper('session',function(input){
    return Session.get(input);
});

这就是全部。完整代码：

JS：

if (Meteor.isClient) {
    Template.main.events({
        "change input[type=radio]" : function (event, template) {
            Session.set("option1", template.find('input:radio[id=radio1]').checked);
            Session.set("option2", template.find('input:radio[id=radio2]').checked);
        }
    });

    Handlebars.registerHelper('session',function(input){
        return Session.get(input);
    });
}

HTML：

<head>
  <title>options</title>
</head>

<body>
  {{> main}}
</body>

<template name="main">
  <div class="radio">
    <label>
      <input id="radio1" name="optiontype" type="radio" value="1"> Option1
    </label>
  </div>
  <div class="radio">
     <label>
       <input id="radio2" name="optiontype" type="radio" value="2"> Option2
     </label>
  </div>
  <div>
    {{> optionTemplate }}
  </div>
</template>

<template name="optionTemplate">
    {{#if session "option1"}}
       <div class="form-group">
         <input type="text" class="form-control" placeholder="enter option1">
       </div>
       <div class="form-group">
         <input type="text" class="form-control =" placeholder="enter option1">
       </div>
    {{/if}}
    {{#if session "option2"}}
       <div class="form-group">
         <input type="text" class="form-control =" placeholder="enter option2">
       </div>
    {{/if}}
</template>

将Template.mytemplate.field置于主模板事件方法中时，HTML无法呈现

1 个答案: