Emberはオブジェクトのプロパティを変更して動作します

Question

問題は2つのレベルのメニューがあることです。クリック後、各メニュー要素の第2レベルが表示されます。もう一度クリックすると、サブメニューは非表示になります。だから私は、最初のレベルのメニュー要素でCSSクラスを切り替えることでこれを行うことができると考えました。

Component.js - これまでのところ、2つのメインメニュー要素が必要です。

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

私は動的にHTML要素を生成しています。私はクラスとアクティブなプロパティをバインドしているので、component.jsで変更された場合、CSSクラスに影響を与えるはずです。

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

だから、最後に私は、最初のレベルのメニューのアクティブパラメータを切り替えるためのシンプルなアクションを定義します。

actions: { 
    toggle: function(menu) { 
     this.toggleProperty(menu.active); 
    } 
} 

しかし、私は文字列として要素を指定していないと言います。 そして、それをmenu.toggleProperty('active')に変更すると、togglePropertyは関数ではないということになります。

私にアドバイスできますか？ありがとう

Answer 1

menuはEmber.Objectではないため、このエラーが発生していると思います。手動で行うことができます：

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