Ember ändern Objekteigenschaft in Aktion

Question

Das Problem ist, dass ich zwei Ebenen Menü haben möchte. Die zweite Ebene für jedes Menüelement wird nach dem Klick angezeigt. Wenn Sie erneut klicken, sollten Untermenüs ausgeblendet werden. Also dachte ich mir, dass ich das tun kann, indem ich die CSS-Klasse in den Menüelementen der ersten Ebene umschalte.

Component.js - bis jetzt möchte ich 2 Hauptmenüelemente haben.

menus: [{ 
      'name': 'Dashboard', 
      'icon': 'dashboard', 
      'active': false, 
      submenus: [{ 
       ... 
      }] 
     }, 
     { 
      'name': 'Settings', 
      'icon': 'cloud', 
      'active': false, 
      submenus: [{ 
       ... 
      }], 
     } 
    ], 

Und in der Vorlage erzeuge ich dynamisch HTML-Elemente. Ich habe die aktive Eigenschaft mit der Klasse verknüpft. Wenn sie sich in component.js ändert, sollte sie die CSS-Klasse beeinflussen.

{{#each menus as |menu|}} 
    <li class="collapsible" {{bind-attr class="menu.active:active"}} {{action 'toggle' menu}}> 
     <a ><span class="glyphicon glyphicon-{{menu.icon}}"></span>{{menu.name}}</a> 
     <ul> 
      {{#each menu.submenus as |submenu|}} 
       {{#link-to submenu.route activeClass="selected" tagName="li"}} 
        <a href=""><{{submenu.name}}</a> 
       {{/link-to}} 
      {{/each}} 
     </ul> 
    </li> 
{{/each}} 

So am Ende definiere ich eine einfache Aktion für aktive Parameter der ersten Ebene Menüs Makel.

Aber damit sagt, dass ich kein Element als String angegeben haben. Und wenn ich es in menu.toggleProperty('active') ändern, heißt es, dass toggleProperty keine Funktion ist.

Können Sie mich beraten? Danke

Answer 1

Ich glaube, dass Sie diesen Fehler erhalten, weil menu kein Ember.Object ist. Sie könnten es manuell tun:

actions: { 
    toggle(menu) { 
    Ember.set(menu, 'active', !Ember.get(menu, 'active')); 
    } 
}