meteor - 在 Meteor 框架中操作模板实例的正确方法是什么？

Question

我是 Meteor 的新手，想知道如何解决在我看来是一个常见问题。

假设我有一个列出餐厅的 Handlebars 模板:

<template name="Restaurants">
  {{#each Restaurant}}
    {{name}}
  {{/each}}
</template>

现在，当用户点击餐厅模板时，我想显示该餐厅的菜单。

我添加了一个名为“menuItems”的子模板，其中包含给定餐厅的所有菜单项:

<template name="Restaurants">
  {{#each Restaurant}}
    {{name}} 
    {{> menuItems}}
  {{/each}}
</template>

我只想在用户单击餐厅模板上的任意位置时呈现 menuItems 子模板的一个实例(只呈现所选餐厅的菜单项)。

它应该是这样的:

Template.Restaurants.events({
'click' : function (e) {
       // This is where I need help - what's the right way to display only one subtemplate instance?
     }
});

我的问题是 - 如何才能选择和显示正确的 menuItems 模板实例？

此外，我想仅在单击之后而不是之前将 menuItems 模板实例放置在 DOM 中(拥有所有餐厅的所有菜单项并且仅隐藏那些 div 不是一个选项，因为数据库中的这些项目数量很多)。

如果您认为我应该以其他方式解决问题，请告诉我，谢谢!

Answer 1

您应该使用{{#if}} 和Session。像这样:

<template name="Restaurants">
  {{#each Restaurant}}
    {{name}} 
    {{#if restaurantSelected}}
      {{> menuItems}}
    {{/if}}
  {{/each}}
</template>

通过使用响应式数据源 Session，您可以设置一个全局标志，指示是否选择了一家餐厅。

Template.Restaurants.restaurantSelected = function() {
  // check whether this restaurant is selected. "this" refers to the current
  // context, eg. the current restaurant in the loop
  return Session.equals("restaurantSelected", this._id);
}

每当您更改该 session key 时，该值将更新并且模板将被重新绘制。因此，您可以在单击餐厅时切换它:

Template.Restaurants.events({
  'click' : function (e) {
    // store the current restaurant ID
    // make sure the event selector is correct!
    Session.set("restaurantSelected", this._id);
  }
});

编辑 为了清楚起见，我创建了 a complete example您可以将其复制到您的项目中并试用。