nested menu list

application.coffee

App.ApplicationRoute = Ember.Route.extend
    setupController: (controller,model)->
        this._super(controller,model)

        controller.set('menu',App.Menu.find())
        return

application.hbs

    {{render "header" App.HeaderView}}
    <section>
      <section class="hbox stretch">
        {{render "menu" menu}}
         <section id="content">
          <section class="hbox stretch">
            <!-- .aside -->
            <aside>
                <section class="vbox">
                    {{show-hiddenbar action-title='修改' title='公司信息' isShowButton=true}}
                    <section class="scrollable">
                            <aside class=" bg-white lter b-r">
                                <section class="vbox">
                                    <section class="scrollable">
                                      {{outlet main-content}}
                                    </section>
                                </section>
                            </aside>
                    </section>
                </section>
            </aside>

            <!-- /.aside -->
            <!-- .aside -->
            <aside class="aside-lg bg-white b-l hide" id="aside">
              <div class="wrapper">
                <h4 class="m-t-none">公司信息</h4>
                  {{outlet hidden-bar}}
              </div>
            </aside>
            <!-- /.aside -->
          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>
        </section>
        <aside class="bg-light lter b-l aside-md hide" id="notes">
          <div class="wrapper">Notification</div>
        </aside>
      </section>
    </section>

index.coffee

App.IndexRoute = Ember.Route.extend()

menu.coffee

App.Menu = Ember.Object.extend()
App.MenuController = Ember.ArrayController.extend()
App.Menu.reopenClass
    find: ->
        [
            title: '数据总览'
            url: '#dashboard'
        ,
            title: '公司管理'
            url: 'companys'
            childs:
                [
                        title: '公司列表'
                        url: 'companys'
                    ,
                        title: '创建公司'
                        url: 'companys/create'
                    ,
                        title: '员工账号'
                        url: 'companys/users'
                ]
        ]
        
App.MenuView = Ember.View.extend
    templateName: "menu"
    tagName: 'aside'
    classNames: ["bg-dark","lter","aside-md","hidden-print"]
    didInsertElement: ->
        this._super()
        $(document).on "click", ".nav-primary a", (e) ->
            $this = $(e.target)
            $active = undefined
            $this.is("a") or ($this = $this.closest("a"))
            return  if $(".nav-vertical").length
            $active = $this.parent().siblings(".active")
            $active and $active.find("> a").toggleClass("active") and $active.toggleClass("active").find("> ul:visible").slideUp(200)
            ($this.hasClass("active") and $this.next().slideUp(200)) or $this.next().slideDown(200)
            $this.toggleClass("active").parent().toggleClass "active"
            $this.next().is("ul") and e.preventDefault()
            console.log($this.href)
App.MenuRoute = Ember.Route.extend
    model: ->
        App.Menu.find()
        

menu.hbs

          <section class="vbox">
            <header class="header bg-primary lter text-center clearfix">
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-dark btn-icon" title="New project"><i class="fa fa-plus"></i></button>
                <div class="btn-group hidden-nav-xs">
                  <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown">
                    Switch Project
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu text-left">
                    <li><a href="#">订阅号</a></li>
                    <li><a href="#">服务号</a></li>
                  </ul>
                </div>
              </div>
            </header>
            <section class="w-f scrollable" >
              <div class="slim-scroll"  data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="5px" data-color="#333333">
            
                <nav class="nav-primary ">
                  <ul class="nav">
                    {{#each pmenu in controller}}
                      <li>
                        <a href="{{ unbound pmenu.url}}">
                          <i class="fa fa-columns icon">
                            <b class="bg-warning"></b>
                          </i>
                          <span class="pull-right">
                            <i class="fa fa-angle-down text"></i>
                            <i class="fa fa-angle-up text-active"></i>
                          </span>
                          <span>{{unbound pmenu.title}}</span>
                        </a>
                        {{#if pmenu.childs}}
                          <ul>
                            {{#each cmenu in pmenu.childs}}
                              <li>
                                <a href="#{{unbound cmenu.url}}">
                                  <i class="fa fa-angle-right"></i>
                                  <span>{{unbound cmenu.title}}</span>
                                </a>
                              </li>
                            {{/each}}
                          </ul>
                        {{/if}}
                      </li>
                    {{/each}}
                  </ul>
                </nav>
              </div>
            </section>
            
            
          </section>