在 Meteor 框架中操作模板实例的正确方法是什么? [英] What is the proper way to manipulate template instance in Meteor framework?

问题描述

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

I am new to Meteor and wondering how to solve what seems to me is a common problem.

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

Let's say I have a handlebars template listing restaurants:

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

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

Now when user clicks on a restaurant template I want to display a menu for that restaurant.

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

I added a subtemplate named "menuItems" that contains all menu items for a given restaurant:

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

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

I want to render only one instance of menuItems subtemplate when user clicks anywhere on Restaurant template (render only the menu items for the selected restaurant).

它应该是这样的:

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

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

My question is - how I can select and display only the correct menuItems template instance?

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

Also I would like to place menuItems template instance in DOM only after the click and not before (having all the menu items for all restaurants and only hiding those divs is not an option because of high number of those items in db).

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

If you think I should approach the solution in some other way please let me know, thanks!

推荐答案

你应该使用 {{#if}} 和 Session.像这样:

You should use {{#if}} and Session. Like this:

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

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

By using Session, a reactive data source, you can set a global flag indicating whether a restaurant is selected.

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);
}

每当您更改该会话密钥时，该值都会更新并且模板将重新绘制.因此，您可以在点击餐厅时切换它:

Whenever you change that session key, the value will update and the template will be redrawn. So, you can toggle it when clicking a restaurant:

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

编辑为了清楚起见，我创建了一个完整的示例，您可以复制它进入您的项目并试用.

Edit For clarity's sake I created a complete example that you can copy into your project and try out.

这篇关于在 Meteor 框架中操作模板实例的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！