CODEWITHSUNDEEP
javascriptember.js
magicshui
magicshui

Reputation: 989

ember.js nested menu list

here is my menuModel.coffee file

App.Menu = DS.Model.extend()
App.Menu.reopenClass
 find: ->
    model = Ember.A()
    x=
    [
        title: '数据总览'
        url: '#dashboard'
    ,
        title: '公司管理'
        url: 'companys'
        childs:
            [
                    title: '公司列表'
                    url: 'companys'
                ,
                    title: '创建公司'
                    url: 'companys/create'
                ,
                    title: '员工账号'
                    url: 'companys/users'
            ]
    ]
    data = JSON.parse(x)
    Ember.Logger.log(data)
    return data

and menuRoute.coffe file:

App.MenuRoute = Ember.Route.extend
model: ->
    App.Menu.find()

menu.hbs file:

{{#each pmenu in controller.data}}
<li>
  <a href="{{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>{{pmenu.title}}</span>
  </a>
  {{#if pemnu.childs}}
  <ul>
    {{#each cmenu in pmenu.childs}}
    <li>
      <a href="#{{cmenu.url}}">
        <i class="fa fa-angle-right"></i>
        <span>{{cmenu.title}}</span>
      </a>
    </li>
    {{/each}}
  </ul>
  {{/if}}
</li>
{{/each}}

i render my menu in my application.hbs using {{render 'menu' App.MenuView}},but there is nothing,i don't know to do make it show like this:

enter image description here

Upvotes: 0

Views: 529

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

3 issues

<a href="{{pmenu.url}}">

needs to be

<a href="{{unbound pmenu.url}}"> or   <a {{bind-attr href=pmenu.url}}>

misspelled

{{#if pemnu.childs}}  ->   {{#if pmenu.childs}}

It looks like you're mixing Ember Data with plain Ember

App.Menu = Em.Object.extend(); // instead off DS

App.Menu.reopenClass({...

render you pass in the context, and it will create a controller and use the context to back the model

{{render 'menu' menuModel}}

Which route are you in rendering the menu? the model hook is only called if you hit the menu route. I'll make a couple examples

Without Ember Data, application template, using render

http://emberjs.jsbin.com/eWecUbif/1/edit

With Ember Data and bind-attr

http://emberjs.jsbin.com/OxIDiVU/17/edit

Upvotes: 1

Related Questions