Question

我需要在ember中创建一个左导航，其功能与ember website上的左导航非常相似。我目前使用的是Ember 1.X，它对嵌套JSON的序列化支持很差。我开始使用这个数据模型，我认为它不适用于Ember 1.X：

New

当我构建此模型时，我收到语法错误：

var menuItems = [{ id: 1, title: 'Payroll', children: { 'Child 1', 'Child 2' } },{ id: 2, title: 'Time & Attendance', children: { 'Child 1', 'Child 2', 'child 3' } }];

Unexpected token

为什么我会收到此错误？

我的菜单title: 'Payroll', children: { 'Child 1', //There's an arrow pointing to the ',' here 'Child 2' },{就是这样构建的（*未经测试）：

template.js

这将有点工作，但我需要一些方法来确保一次只激活1个元素。

我是否需要更新ember 2.X才能执行此类操作？

Answer 1

我认为你不需要为此加emb。我建议添加＆＃39;选择＆＃39;属性到您的模型，或者使用Ember.ProxyObject添加一个额外的属性，名为＆＃39; selected＆＃39;在每个menuItem对象上，我们可以捕获哪一个处于活动状态，然后执行以下操作：

您的模板如下所示：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
        <ul class="navMenu nav list-unstyled">
          {{#each menuItems as |menuItem|}}
              <span {{action "toggleActive" menuItem}} class="">{{menuItem.title}}</span>
               {{#if menuItem.selected}}
                  <ul>
                    {{#each menuItem.children as |child|}}
                      <li><a href="#">{{child}}</a></li>
                    {{/each}}
                  </ul>
               {{/if}}
          {{/each}}
        </ul>
    </div>
    <div class="col-md-10">Will be content</div>
  </div>
</div>

你的控制器看起来像：

menuItems : Ember.computed.map('model', function(menuItem, index) {
    if(menuItem.get('childItems.length')){
        return Ember.ObjectProxy.create({
           content: menuItem,
           selected: false
        });
    }
}),

actions:{
    toggleActive: function(menuProxy){
       this.get('menuItemsProxy').setEach('selected', false);
       menuProxy.set('selected', true);
    }
}

<强>更新

Lot在ember数据中发生了变化但尝试了一下：

//assuming you are using ember cli
export default Ember.Model.create({
    title:DS.attr('string'),
    childItems: DS.hasMany('menuItem', {async: true})
});

并且您对menuItem api的JSON响应应为：

{
    "menuItems": [
        {
            id: 1,
            title: 'Payroll',
            childItems: [3, 4]

        }, {
            id: 2,
            title: 'Time & Attendance',
            children: [5, 6]
        },
        {
            id: 3,
            title: 'child of payroll',
            childItems: []
        },...
    ]
}

Ember离开了导航创作

1 个答案: