开发了一个菜单组件 - 如何将子菜单添加到组件

Question

我有一个菜单组件，用于根据提供给组件的menuObject填充菜单项列表。我可以将menuObject传递给组件，并在单击按钮时显示菜单。

但是当menuObject与子元素嵌套时，如何显示子菜单。

我不确定如何在menuObject上递归运行以使用Components构建子菜单。此外，总和菜单应仅显示在项目的 mouseEnter 上，并应隐藏在项目上的 mouseLeave 事件中。

我的模板：

<script type="text/x-handlebars" data-template-name="application">
    <button {{action "showMenu" bubbles=false }}>DropDown Menu</button>
    {{#if isShowMenu }}  
        {{show-menu menuAction='menuAction' menuObj=menuObj}} 
    {{/if}
</script>

<script type="text/x-handlebars" data-template-name="components/show-menu">
    <div id="showmenudiv" style="position: absolute;z-index:10;left:10px;top:45px;">
    <ul>
        {{#each menuObj}}
            <li class="menuli" {{action 'menuClick' this bubbles=false}}>{{name}}</li>
        {{/each}}
    </ul>
    </div> 
</script>

App.js：

App.ApplicationController = Ember.Controller.extend({
    isShowMenu: false
});

App.ApplicationRoute = Ember.Route.extend({
actions:{
showMenu: function(){ 
    var menuObj = [
        {'action': 'createFolder', 'name': 'Create Folder', 'children': [ {'action': 'createSubFolder', 'name': 'Create Sub Folder'}]},
        {'action': 'createDocument', 'name': 'Create Document', 'children':[]},
        {'action': 'createSheet', 'name': 'Create Sheet', 'children':[]},
    ];
    this.controller.toggleProperty('isShowMenu');
    this.controller.set('menuObj', menuObj);
}
});

JSBin Link