0

这是 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？

4

2 回答 2

0

感谢@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
    });
  }
});
于 2014-12-28T10:02:37.723 回答
0

来自文档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
    });
  }
});
于 2014-12-28T09:36:34.223 回答