Meteor.js 子模板助手答案

【问题标题】：Meteor.js sub templates helpersMeteor.js 子模板助手
【发布时间】：2014-12-28 18:02:37
【问题描述】：

这是 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 关联，而不仅仅是没有_id 的menu_level？

【问题讨论】：

标签： meteor meteor-helper

【解决方案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
    });
  }
});

【讨论】：

感谢您的想法。我必须再添加一个助手——menu 模板。所以现在menu_level 与菜单具有相同的上下文。

【解决方案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
    });
  }
});

【讨论】：