将空格键数据上下文从父模板传递给子模板

Question

我在使用嵌套模板时遇到了一个愚蠢的问题。我想创建一个下拉菜单，其中包含 4 个主要类别和每个主要类别的大约 2-3 个子类别。

<template name="Warehouselist">
   <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#"> {{warehouse}} <span class="caret"></span></a>
    <ul class="dropdown-menu">     
    {{#each Forms}}
      {{>Form}}  //Pass {{warehouse}} here
    {{/each}}                
    </ul>
  </li>
</template>
<template name="Form">
   <li id="EWPacking"><a href="#">{{FormName}}</a></li>
</template>

问题是我不知道如何按顺序将 {{warehouse}} 数据传递给子模板的助手，所以我可以做这样的事情。

  Template.bonus.helpers({
    Userform: function(){
      return UserForms.find({});
    },
    warehouse: function(){
      return Warehouse.find({});
    },
  });
  Template.Warehouselist.helpers({
    Forms: function(Warehouse){
      return Forms.find({Warehousename:Warehouse});
    }
  });

重点是子模板的助手必须return不同的数据，这取决于父元素的类别。

Answer 1

在子模板中使用父数据上下文'Form':

<template name="Warehouselist">
    <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{warehouse}}<span class="caret"></span>
          </a>
        <ul class="dropdown-menu">
            {{#each Forms}}
                {{>Form}}
            {{/each}}
        </ul>
    </li>
</template>
<template name="Form">
    <li id="EWPacking">
     <a href="#">{{FormName}} - {{../warehouse}}</a></li>
</template>

并为 Warehouselist 模板助手更改 javascript。使用 Template.currentData() 从数据上下文中获取仓库并将其传递到 Forms.find() 中。像这样：

Template.Warehouselist.helpers({
    Forms: function(){
        var warehouse = Template.currentData().warehouse;
        console.log('warehouse:', warehouse);
        return Forms.find({Warehousename: warehouse});
    }
});

如果您想像您要求的那样将仓库传递给子模板，请使用：（但是：如果您遵循上述解决方案，则不需要这样做！）

{{#each Forms}}
  {{>Form warehouse=warehouse}}
{{/each}}

将空格键数据上下文从父模板传递给子模板

Passing spacebar data context from parent template to child

meteor

spacebars

meteor-blaze