如何将变量传递给助手并在模板中显示它？

Question

我想收集从模板中收集的变量（用户 _id），并使用会话将其传递给另一个模板。然后我想显示这个变量。 实际上它似乎在变量的集合和传递给另一个模板中工作，但我无法在第二个模板中显示用户的信息......

这是我的代码：

HTML

<template name="main"><!--Template 1-->
    <table>
        <tr>
            <th>Patient</th>
        </tr>
        {{#each allUsers}}
        <tr>
            <th><label><input type="radio" class="selected" name="patient" value="{{this._id}}"><i class="fa fa-user"></i> {{this.profile.lastName}} {{this.profile.firstName}}</label></th>
        </tr>
        {{/each}}
    </table>

   {{>test}}
</template>

<template name="test"> <!--Template 2-->
   <p>Name is <button class="test" name="patient" value="{{this._id}}">Test</button></p>
   <div name="show">Name: {{this.profile.firstName}}</div>
</template>

JS

Template.main.events({
'click .selected': function (){
var selPat = $('input[name="patient"]:checked').val();
Session.set("selPat",selPat);
console.log("collect", selPat);
}
});

Template.test.events({
    'click .test': function(){
        var PAT= Meteor.users.findOne({ _id: Session.get("selPat")});
        console.log("pass", PAT);
        return PAT;
    }

});
Template.patients.helpers({
   allUsers: function() {
       return Meteor.users.find({});
   }
});

我想在模板 2 中显示在模板 1 中使用 {{this.profile.firstName}} 选择的用户的名字

Answer 1

我相信这就是你正在做的事情：

1. 您正在通过主模板中的单选按钮从患者列表中选择患者 ID。 [这个实现是正确的]
2. 您正在主模板事件的会话中设置患者 ID。 [这个实现是正确的]
3. 当您单击测试模板中的“测试”按钮时，它应该在按钮下方的 div 中显示用户的名字。 [...不完全]

您无法在 <div name="show">Name: {{this.profile.firstName}}</div> 中显示任何内容，因为您没有相关的助手为模板提供该信息。

---

虽然在测试模板中单击按钮以显示患者的名字听起来有点多余，但我相信您有理由这样做。

我建议您将 div 包装在 if block 中。当单击按钮时，if 条件呈现为真，因此会显示 div 元素。

<template name="test"> <!--Template 2-->
   <p>Name is <button class="test" name="patient" value="{{this._id}}">Test</button></p>

{{#if isButtonClicked}}
   <div name="show">Name: {{data.profile.firstName}}</div>
{{/if}}

</template>

你的助手和事件会是这样的：

Template.test.events({
    'click .test': function(){
      // set this session to true when the button has been clicked.
      Session.set("testClicked", true);

     }
});

Template.test.helpers({
     isButtonClicked: function(){
      // return the if block's validation.
      return Session.get("testClicked");
     },

     data: function(){
        // return the actual user data retrieved from the collection.
        var PAT= Meteor.users.findOne({ _id: Session.get("selPat")});
        console.log("pass", PAT);
        return PAT;
});

---

注意： 当您从单选按钮列表中选择不同的患者时，您可能希望确保该 div 不会保持打开状态。不这样做会使 div 在您第一次单击按钮时可见，并在您刷新页面之前保持打开状态，即使您选择了不同的患者也是如此。 您可以在Template.main.events 中将testClicked 设置为false 或undefined --> 'click .selected'