Ember left nav создание

Question

Мне нужно создать левую навигацию в ember, которая очень похожа на левую навигацию на ember website. Я в настоящее время на Ember 1.X, который имеет плохую поддержку сериализации для вложенного JSON. Я начал с этой моделью данных, которую я не верю, будет работать с Ember 1.X:

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 построен так (* непроверенные):

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

Это будет своего рода работа, но мне нужно каким-то образом обеспечить только один элемент активен в то время.

Нужно ли обновлять до ember 2.X, чтобы сделать что-то вроде этого?

Answer 1

Я не думаю, что для этого вам нужен ember 2. Я бы предложил либо добавить свойство «selected» к вашей модели, либо использовать Ember.ProxyObject, чтобы добавить дополнительное свойство «selected» для каждого из объектов 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); 
    } 
} 

UPDATE

Лот изменилось в Ember данных, но дать этому попытку:

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

и ваш ответ JSON для MENUITEM API должен быть:

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

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