Question

这是Meteor应用程序中菜单的简化工作模板：

<template name="menus">
  {{#each menus}}
    {{> menu}}
  {{/each}}
</template>

Template.menus.helpers({
  menus: function () {
    return menus.find();
  }
});

<template name="menu">
  {{title}}
  {{#each menu_items}}
    {{> menu_item}}
  {{/each}}
  </div>
</template>

Template.menu.helpers({
  menu_items: function () {
    return menu_items.find({
      menuId: this._id
    });
  }
});

<template name="menu_item">
  <div class="b-menu-item">
    <a class="b-menu-item-link" href="{{link}}">{{title}}</a>
  </div>
</template>

现在我需要添加menu_level模板来实现无限子菜单项呈现：

<template name="menus">
  {{#each menus}}
    {{> menu}}
  {{/each}}
</template>

Template.menus.helpers({
  menus: function () {
    return menus.find();
  }
});

<template name="menu">
  {{title}}
  {{#if menu_items}}
    {{> menu_level}}
  {{/if}}
  </div>
</template>

<template name="menu_level">
  <div class="b-menu-level">
  {{#each menu_items}}
    {{> menu_item}}
  {{/each}}
  </div>
</template>

Template.menu_level.helpers({
  menu_items: function () {
    return menu_items.find({
      menuId: this._id
    });
  }
});

<template name="menu_item">
  <div class="b-menu-item">
    <a class="b-menu-item-link" href="{{link}}">{{title}}</a>
    {{#if menu_items}}
      {{> menu_level}}
    {{/if}}
  </div>
</template>

Template.menu_item.helpers({
  menu_items: function () {
    return menu_items.find({
      menuItemId: this._id
    });
  }
});

但是，我无法通过此帮助程序获取菜单项：

Template.menu_level.helpers({
  menu_items: function () {
    return menu_items.find({
      menuId: this._id
    });
  }
});

如何强制this._id与menu <- menu_level相关联，而不只是menu_level没有_id？

Answer 1

来自文档http://docs.meteor.com/#/full/template_parentdata

您可以使用Template.parentData(index)

简单代码

<template name="menu">
  {{title}}
  {{#if menu_items}}
    {{> menu_level}}
  {{/if}}
  </div>
</template>

<template name="menu_level">
  <div class="b-menu-level">
  {{#each menu_items}}
    {{> menu_item}}
  {{/each}}
  </div>
</template>

并在

Template.menu_level.helpers({
  menu_items: function () {
    var data=Template.parentData(1);
    console.log(data)
 //check whether you are getting exact data otherwise change the index to Template.parentData(2) and check
     var menuId=data._id;//this is equivalent to {{../this._id}}
    return menu_items.find({
      menuId: menuId
    });
  }
});

或者您可以将数据传递给帮助者（不确定）

<template name="menu_level">
      <div class="b-menu-level">
      {{#each menu_items ../_id}}
        {{> menu_item}}
      {{/each}}
      </div>
    </template>


Template.menu_level.helpers({
  menu_items: function (menuid) {
    return menu_items.find({
      menuId: menuid
    });
  }
});

Answer 2

感谢@Sasikanth回答。

我必须再添加一个帮助程序到menu模板：

Template.menu.helpers({
  menu_items: function () {
    return menu_items.find({
      menuId: this._id
    });
  }
});

所以现在menu_level与菜单具有相同的上下文。

最终代码：

<template name="menus">
  {{#each menus}}
    {{> menu}}
  {{/each}}
</template>

Template.menus.helpers({
  menus: function () {
    return menus.find();
  }
});

<template name="menu">
  {{title}}
  {{#if menu_items}}
    {{> menu_level}}
  {{/if}}
  </div>
</template>

Template.menu.helpers({
  menu_items: function () {
    return menu_items.find({
      menuId: this._id
    });
  }
});

<template name="menu_level">
  <div class="b-menu-level">
  {{#each menu_items}}
    {{> menu_item}}
  {{/each}}
  </div>
</template>

Template.menu_level.helpers({
  menu_items: function () {
    return menu_items.find({
      menuId: this._id
    });
  }
});

<template name="menu_item">
  <div class="b-menu-item">
    <a class="b-menu-item-link" href="{{link}}">{{title}}</a>
    {{#if menu_items}}
      {{> menu_level}}
    {{/if}}
  </div>
</template>

Template.menu_item.helpers({
  menu_items: function () {
    return menu_items.find({
      menuItemId: this._id
    });
  }
});

Meteor.js子模板助手

2 个答案: