在流星中将变量从父模板传递到子模板

Posted 2023-03-08

【中文标题】在流星中将变量从父模板传递到子模板

【英文标题】：Passing variable from parent template to child template in meteor

【发布时间】：2016-03-26 15:52:49

【问题描述】：

我有一个父模板，里面有几个嵌套的子模板。在每个嵌套模板中，我都有一个从数组生成的字符串。我的 html 的简化模型：

<template name="parent">
   <a class="logId">Console log parent Id</a>
   > firstChild
   > secondChild
</template>

此外，我的子模板有一个这样的 each 循环：

<template name="firstChild">
   #each users
      this
      > adminSelectUser
   /each
</template>

<template name="adminSelectUser">
   <a class="selectUser">SelectUser</a>
</template>

在我的 js 代码中：

Template.parent.events(
    'click .logId': function () 
       var eventId = this._id._str;
       console.log(eventId);
);

Template.adminSelectUser.events(
   'click .selectUser': function(template)
      var userString = this.valueOf();
      console.log(userString);
    
 );

到目前为止，我让它工作，在我的两个模板中，我都可以找到我父母的 id 和我想要的用户字符串。但是我还想在同一个方法调用中使用我的变量 eventId 和 userString，从模板 adminSelectUser 调用。有什么方法可以将在父模板中找到的 eventId 传递给 adminSelectUser 模板，以便我可以使用相同的方法调用来处理这两个变量。

这就是我的服务器方法的目标：

Meteor.methods(
    removeUser: function()
       Meets.update(_id: eventId, $pull : usersApplied: userString);
  
); 

我希望我的服务器方法能够识别 eventId 和 userString，并在我稍后在 adminSelectUser 模板中调用该方法时让它们一起工作。

希望这已经足够清楚了！

【问题讨论】：

查看类似问题 - ***.com/questions/10128053/…

【参考方案1】：

有几种方法可以解决这个问题。

使用Template.parentData

您可以使用 Template.parentData(n) 从模板 JS 中遍历模板层次结构，其中 n 是您想要在层次结构中向上移动的层数。所以专门针对您的示例：

Template.adminSelectUser.events(
  'click .selectUser': function(template)
    var user = this;
    var parentId = Template.parentData(2)._id;

    myRemoveMethod(parentId, user);
  
);

然而，这意味着内部模板依赖于总是在同一层次结构中呈现，这有点难闻。如果模板紧密耦合并且是这种情况（很可能），那么使用parentData 可能就可以了。但是，如果模板具有数据依赖关系，则显式传递适当的数据是有意义的（参见 #2）。

将数据显式传递到模板中。

<template name="firstChild">
  #each users
    this
    > adminSelectUser user=this parent=..
  /each
</template>

在您的示例中，当您不向模板渲染传递任何参数时，数据上下文被假定为this。在这里，我们将user 和parent 传递到模板中（注意这里使用.. 来引用用户循环之外的this）。你的处理程序看起来更像：

Template.adminSelectUser.events(
  'click .selectUser': function() 
    var data = Template.currentData();
    myRemoveMethod(data.parent._id, data.user);
  
);