Question

问题是我想要两级菜单。单击后将显示每个菜单元素的第二级。如果再次单击它应该隐藏子菜单。所以我认为我可以通过在第一级菜单元素上切换CSS类来实现这一点。

Component.js - 到目前为止，我希望有2个主菜单元素。

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

在模板中，我动态生成HTML元素。我已经将class绑定到了active属性，所以如果它在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

我相信您收到该错误是因为data不是menu。你可以手动完成：

Ember.Object

Ember修改对象的属性

1 个答案: