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

关键是子模板的帮助器必须返回不同的数据，具体取决于父元素的类别。

Answer 1

在子模板中使用父数据上下文＆＃39;表格＆＃39;：

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

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

1 个答案: