ember.js嵌套菜单列表

Question

这是我的menuModel.coffee文件

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

和menuRoute.coffe文件：

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

menu.hbs文件：

{{#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}}

我使用{{render'menu'App.MenuView}}在我的application.hbs中渲染我的菜单，但没有任何东西，我不知道如何让它显示如下：

Answer 1

3个问题

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

需要

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

拼错

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

看起来你正在将Ember Data与简单的Ember混合

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

App.Menu.reopenClass({...

渲染你在上下文中传递，它将创建一个控制器并使用上下文来支持模型

{{render 'menu' menuModel}}

你在渲染菜单的路线是什么？仅当您点击菜单路线时才会调用模型钩子。我会做几个例子

没有Ember Data，应用程序模板，使用渲染

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

使用Ember Data和bind-attr

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